image 未加載完畢出現 loading 等完成後再顯示image？

Question

想請問一下，假設網頁中有圖片仍然在加載，如何讓他先顯示一張loading圖，等到image加載完畢後再顯示該image？？？（一頁可能會有數十張image）

Answer 1

这就是预加载，你把页面上需要预加载的图片路径设置为loading图片，然后给每个img标签一个自定义属性(比如data-img)，用来存放真正的图片路径，再来一个公共的class吧，如loadimg方便js操作。

然后js里可以

$('loadimg').each(function(item){
  var src = $(this).attr('data-img'),
         img = new Image();
   img.onload = function(){
     $(this).attr('attr',src);
     img = null;
   }
   img.src = src;
})

Answer 2

onload事件 complete属性可以认定图片加载完毕

Answer 3

建议使用lazyload