图片未加载完时,显示占位图片

思路

利用img的背景,且添加图片加载完成事件,当加载完后去除img背景(这样,就算图片背景透明也不会显示)

img {
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.......);
  background-size: 100% 100%;
  background-clip: content-box;
  background-origin: content-box;

}

图片加载完成事件

            // 给刚才添加的img添加加载完成事件,去除加载背景
                for(let imgObj of $("#matchItems").find('img')) {
                   imgObj.onload = function(e) {
                       $(e.target).css({
                          "background": "rgba(0,0,0,0)"
                       })
                   }
                }        

  

posted @ 2023-01-12 13:25  小庄的blog  阅读(19)  评论(0编辑  收藏  举报