圖片延遲加載（lazyload）的實現原理

此前在瀏覽一些網站的時候，發現他們網站的圖片都是你「鼠標」滾到哪，圖片纔會加載顯示。當時以爲好神奇，怎麼會這麼「跟手」呢。

在學習JS和jQuery後，本身嘗試寫了可以實現lazyload的方法。

核心原理是：

1 設置一個定時器，計算每張圖片是否會隨着滾動條的滾動，而出如今視口（也就是瀏覽器中的 展示網站的空白部分 ）中；

2 爲<img>標籤設置一個暫存圖片URL的自定義屬性（例如loadpic），當圖片出如今視口時，再將loadpic的值賦給圖片的src屬性；

最後，貼出分別用原生js和jQuery實現該功能的實現方法：

1 原生JavaScript的實現方法

<script>  var imgs = document.getElementsByTagName('img');  // 獲取視口高度與滾動條的偏移量  function lazyload(){   var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;   var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;   for(var i=0; i<imgs.length; i++) {    var x =scrollTop+viewportSize-imgs[i].offsetTop;    if(x>0){     imgs[i].src = imgs[i].getAttribute('loadpic');    }   }  }  setInterval(lazyload,1000); </script> 

2 jQuery的實現方法

/** * 圖片的src實現原理 */ $(document).ready(function(){  // 獲取頁面視口高度  var viewportHeight = $(window).height();  var lazyload = function() {   // 獲取窗口滾動條距離   var scrollTop = $(window).scrollTop();   $('img').each(function(){   // 判斷 視口高度+滾動條距離 與 圖片元素距離文檔原點的高度    var x = scrollTop + viewportHeight - $(this).position().top;   // 若是大於0 即該元素能被瀏覽者看到，則將暫存於自定義屬性loadpic的值賦值給真正的src    if (x > 0)   {    $(this).attr('src',$(this).attr('loadpic'));   }  })  }  // 建立定時器 「實時」計算每一個元素的src是否應該被賦值  setInterval(lazyload,100); }); 

固然，上述代碼仍是很簡陋，僅僅說了實現的原理，生產環境推薦使用： jquery_lazyload