網頁圖片加載loading效果實現

網頁加載圖片時通常用背景圖來顯示，這樣能確保圖片不被拉伸變形。這個時候就需要用到img標簽的onload函數來確認圖片已經下載成功。實現方法如下：
1、把圖片地址綁定到目標元素身上

url即為圖片地址，src為div屬性
2、用js獲取src屬性後，new Image();出一個圖片，並賦值src地址
var img = new Image();
img.src='';
3、通過onload的函數來判斷下載是否完成
img.onload = function () {
target.style.backgroundImage = url('${url}');
that.isLoad = true;
};
完成後將圖片地址賦給目標元素設為背景圖即可；
ps:圖片隻會下載一次

最後更新：2017-09-28 19:03:03