定義

圖片懶載入又稱圖片延時載入、惰性載入，即在使用者需要使用圖片的時候載入，這樣可以減少請求，節省頻寬，提高頁面載入速度，相對的，也能減少伺服器壓力。 
惰性載入是程式人性化的一種體現，提高使用者體驗，防止一次性載入大量資料，而是根據使用者需要進行資源的請求。

實現

懶載入的難點在於確定某張圖片是否是使用者需要的資源，在瀏覽器中，使用者需要的是可視區內的資源，因此我們只需要判斷圖片是否已經呈現在可視區內，當圖片呈現在可視區內時，獲取圖片的真實地址並賦給該圖片即可(圖片寬高需要指定，可以利用padding處理)。

判斷是否存在於可視區

1. 瀏覽器視口高度

2. 待載入資源距離視口頂端位置

通過以上兩點即可判斷圖片是否位於可視區內。

var nodes = document.querySelectorAll('img[data-src]'),

   elem = nodes[0],

   rect = elem.getBoundingClientRect(),

   vpHeight = document.documentElement.clientHeight;

if(rect.top < vpHeight && rect.bottom>=0){

 console.log('show')

}

之後獲取圖片的真實地址

<img

...

<script>

var src = elem.dataset.src;

</script>

把真實地址賦給圖片

var img =newImage();

img.onload =function(){

 elem.src = img.src;

}

img.src = src;

完整程式碼如下

var scrollElement = document.querySelector('.page'),

   viewH = document.documentElement

function lazyload(){

var nodes = document.querySelectorAll('img[data-src]');

Array.prototype.forEach.call(nodes,function(item,index){

var rect;

if(item.dataset.src==='')return;

   rect = item.getBoundingClientRect();

if(rect.bottom>=0&& rect.top < viewH){

(function(item){

var img =newImage();

         img.onload =function(){

           item.src = img.src;

}

         img.src = item.dataset.src

         item.dataset.src =''

})(item)

}

})

}

lazyload();

scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));

function throttle(fun, delay, time){

var timeout,

       startTime =newDate();

returnfunction(){

var context =this,

           args = arguments,

           curTime =newDate();

       clearTimeout(timeout);

if(curTime - startTime >= time){

           fun.apply(context, args);

           startTime = curTime;

}else{

           timeout = setTimeout(fun, delay);

}

};

};

來自文章