js實作網頁圖片延時載入 提升網頁開啟速度_javascript技巧

提升網頁載入速度的方法有很多種，用 jquery.lazyload.js 實現圖片異步延遲加載，對於頁麵包含圖片較多的網站來說，會是個不錯的提升網頁打開速度的方法。程式碼君網站欄頁列表左側，在PC端預覽時能看到一個文章略縮圖展示模組，一定程度上會延長網頁載入時間。本文採用圖片非同步延遲載入的方法，來提升本站頁面載入速度。

圖片非同步加載，就是不必一次性把頁面的所有圖片都加載顯示出來，等用戶滑動滾動條到某個位置時才會加載顯示相應位置的圖片，這樣能很好地提升網頁加載速度，進一步提升使用者體驗。

有很多技術性文章的配圖是非常多的，如果打開網頁時要求能夠一次性加載完成所有圖片的話，用戶等候的時間肯定就得非常長了。這種做法會讓使用者體驗非常不好，況且也沒有必要一次把頁面上的所有圖片都載入出來。圖片異步延遲加載，才是網頁設計中最合理、最恰當的做法。

我們用 jquery.lazyload.js 來實現圖片異步延遲加載，記得要先載入 jQuery 才行。

1、導入 JS 外掛：

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.lazyload.js"></script>

2、在頁面插入 JavaScript 程式碼：

$(document).ready(function($){
$("img").lazyload({
placeholder:"grey.gif", //加载图片前的占位图片
effect:"fadeIn" //加载图片使用的效果(淡入)
});
});

透過以上兩步，就能簡單實現網頁圖片非同步延時載入了。

再為大家具體介紹一下：
有時我們看到一些大型網站，頁面如果有很多圖片的時候，當你滾動到相應的行時，當前行的圖片才即時加載的，這樣子的話頁面在打開只加可視區域的圖片，而其它隱藏的圖片則不加載，一定程式上加快了頁面加載的速度，對於比較長的頁面來說，這個方案是比較好的。

建議：使用jquery圖片延遲載入外掛程式jquery.lazyload實現圖片延遲

實作原理：

把所有需要延時載入的圖片改成如下的格式：

<img lazy_src="图片路径" border="0"/>

然後在頁面載入時，把所有使用了lazy_src的圖片都保存到數組裡，然後在滾動時計算可視區域的top，然後把延時加載的圖片中top小於當前可視區域（即圖片出現在可視區域內）的圖片的src的值用lazy_src的來替換（載入圖）：

JS代碼：

 lazyLoad = (function() {
 
  var map_element = {};
 
  var element_obj = [];
 
  var download_count = 0;
 
  var last_offset = -1;
 
  var doc_body;
 
  var doc_element;
 
  var lazy_load_tag;
 
  function initVar(tags) {
 
    doc_body = document.body;
 
    doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
 
    lazy_load_tag = tags || ["img", "iframe"];
 
  };
 
  function initElementMap() {
 
    var all_element = [];
 
    //从所有相关元素中找出需要延时加载的元素
 
    for (var i = 0,
 
len = lazy_load_tag.length; i < len; i++) {
 
      var el = document.getElementsByTagName(lazy_load_tag[i]);
 
      for (var j = 0,
 
len2 = el.length; j < len2; j++) {
 
        if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
 
          element_obj.push(all_element[key]);
 
        }
 
      }
 
    }
 
  
 
    for (var i = 0,
 
len = element_obj.length; i < len; i++) {
 
      var o_img = element_obj[i];
 
      var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
 
      if (map_element[t_index]) {
 
        map_element[t_index].push(i);
 
      } else {
 
        //按距上距离保存一个队列
 
        var t_array = [];
 
        t_array[0] = i;
 
        map_element[t_index] = t_array;
 
        download_count++; //需要延时加载的图片数量
 
      }
 
    }
 
  
 
  };
 
  function initDownloadListen() {
 
    if (!download_count) return;
 
    var offset = (window.MessageEvent && !document.getBoxObjectFor) &#63; doc_body.scrollTop : doc_element.scrollTop;
 
    //可视化区域的offtset=document的高+
 
    var visio_offset = offset + doc_element.clientHeight;
 
    if (last_offset == visio_offset) {
 
      setTimeout(initDownloadListen, 200);
 
      return;
 
    }
 
    last_offset = visio_offset;
 
    var visio_height = doc_element.clientHeight;
 
    var img_show_height = visio_height + offset;
 
    for (var key in map_element) {
 
      if (img_show_height > key) {
 
        var t_o = map_element[key];
 
        var img_vl = t_o.length;
 
        for (var l = 0; l < img_vl; l++) {
 
          element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
 
        }
 
        delete map_element[key];
 
        download_count--;
 
      }
 
    }
 
    setTimeout(initDownloadListen, 200);
 
  };
 
  function getAbsoluteTop(element) {
 
    if (arguments.length != 1 || element == null) {
 
      return null;
 
    }
 
    var offsetTop = element.offsetTop;
 
    while (element = element.offsetParent) {
 
      offsetTop += element.offsetTop;
 
    }
 
    return offsetTop;
 
  }
 
  function init(tags) {
 
    initVar(tags);
 
    initElementMap();
 
    initDownloadListen();
 
  };
 
  return {
 
    init: init
 
  }
 
})();

使用方法：把頁面上需要延時載入的圖片src改成為lazy_src，然後把上面的js放到body最後面，然後呼叫：lazyLoad.init();
調戲的方法可以使用firebug來查看一時圖片是否是延時載入。
另外：
如果你的頁面上存在有內容切換的欄目的話，可能在切換時切換的內容裡的圖片可能會不顯示，處理的方法是在內容時單獨圖片加載處理，如：

///切换内容的代码…
 
 chlid.find("img[init_src]").each(function(){
 
  $(this).attr("src",$(this).attr("init_src"));
 
  $(this).removeAttr("init_src");
 
 });

  所謂圖片非同步加載，意思是不用一次把圖片全部加載完，你可以叫它延遲加載，緩衝加載都行。

  看看你有沒有這種需求：某篇文章圖片很多，如果在載入文章時就載入所有圖片，無疑會延緩載入速度，讓用戶等更久，所以，我想找這樣一種插件，讓網頁只加載瀏覽器視野範圍內的圖片，沒出現在範圍內的圖片就暫不加載，等用戶滑動滾動條時再逐步加載，lazyload就是用來實現這種效果。
lazyload.js其實是jQuery的一個插件，全名是jquery.lazyload.js，看它的名字就知道它的作用了──就是偷懶載入的意思。由於它是javascript寫的，所以適用於所有網頁，包括Wordpress。

  想要使用lazyload，得先載入jQuery，它是依賴jQuery來達到效果的。

以上就是本文的全部內容，希望大家對js實現網頁圖片縮時加載有了更深入的學習了解。