一、什麼是懶加載？
懶加載，就是延遲加載。針對於多圖片的頁面，只有當該圖片出現在頁面視區中時，再加載該圖片。。可以防止頁面一次性加載完所有的圖片，用戶等待時間較長，影響用戶體驗。
二、如何實現懶加載
1. 將頁面中的圖片的src屬性設置爲空，並將src屬性真正的值存放在自定義屬性data-originnal（自定義屬性以data-開頭）。
2.爲頁面中的圖片設置好大小，防止引起頁面的迴流，影響性能。
3.判斷元素是否進入用戶視野中。（利用元素的offsetTop屬性與 scrollTop、clientTop之間的關係判斷）。若進入視野，則將 data-original屬性的值賦給圖片的src屬性
4. 滾動，重複判斷元素是否進入視野。
三、具體實現：
1.設計HTML
<img data-original="mogu.jpg" alt="" class="picture" src="" >2.判斷元素是否進入視野
if(scrollTop+height>offsetTop){
var img = new Image(); //跨域異步請求圖片
img.onload = function () {
console.log(1);
item.src = img.src;
}
img.src = item.dataset.original; //獲取自定義對象的屬性
}四、完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lazyload</title>
<style>
#pictures{
width: 900px;
border: 1px solid #ccc;
overflow: hidden;
}
.picture{
float:left;
width:250px;
height:250px;
margin: 10px 20px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="pictures">
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
<img data-original="mogu.jpg" alt="" class="picture" src="" >
</div>
<script>
var images=document.getElementsByTagName('img');
function lazyload() {
Array.prototype.forEach.call(images,function(item,index) {
var height=document.documentElement.clientHeight;
var scrollTop=document.documentElement.scrollTop;
var offsetTop=item.offsetTop;
if(scrollTop+height>offsetTop){
var img = new Image();
img.onload = function () {
item.src = img.src;
}
img.src = item.dataset.original;
}
});
}
lazyload(); //第一次加載頁面時需要自動加載
document.addEventListener("scroll",lazyload);
</script>
</body>
</html>五、代碼中的基礎問題以及解決方法
1.判斷是否進入可視區
2.獲取自定義的屬性
1.通過element.dataset.original.
語法：
基本上最新的瀏覽器都支持，對於低版本的瀏覽器兼容性不好。
對於 element.dataset的詳細使用，參考鏈接點擊打開鏈接
對於如何兼容低版本的瀏覽器，請參考 我的文章 ，實現兼容版本的element.dataset。
2.通過 document.getAtrribute（“data-original”）；
兼容性好
六、代碼的其他問題
判斷元素是否在可視區域時，會重複判斷元素，造成浪費。
七、使用echo.js庫實現預加載
echo.js使用原生js編寫，不需要依賴其他庫。可獨立使用。（lazyload是jquery插件，使用時必須引入jquery，功能完善）
1. 下載並引入echo.js。
<script src="https://cdn.bootcss.com/echo.js/1.7.3/echo.js"></script> 2.設置圖片的自定義屬性爲data-echo
3. 使用：獲取元素並調用init（)方法。接收一個對象。對象參數如下。
offset：圖片在可視區域下方一段距離時，開始加載
throttle：圖片延遲多少毫秒後加載。
unload：是否卸載在可視區域外面的圖片。默認爲false。
echo.init({
offset:0,
throttle:0,
unload:true,
callback:funtion(element,op){
}
});