javascript圖片延遲加載實現(xiàn)方法及思路

更新時間：2015年12月31日 11:10:38 作者：布瑞澤的童話

這篇文章主要介紹了javascript圖片延遲加載實現(xiàn)方法及思路，有時我們需要用懶加載，也就是延遲加載圖片的方式，來提高網(wǎng)站的親和力,需要的朋友可以參考下

本文實例為大家介紹了如何通過javascript來延遲加載圖片，分享給大家供大家參考，具體內容如下

當一個網(wǎng)頁中含有大量圖片時，如果一開始就將圖片全部加載完畢，勢必會引起性能和效率上的問題，用戶可能會由于等待時間過久而離開。

這個時候，我們需要利用懶加載，也就是延遲加載圖片的方式，來提高網(wǎng)站的親和力。

一、延遲加載圖片

基本思路如下:
給需要延遲加載的圖片設置自定義屬性比如lazy-src，存在圖片源所在路徑。然后將所有需要懶加載的圖片放入一個數(shù)組，在window.onscroll的時候判斷該數(shù)組內容是否出現(xiàn)在了用戶視線中，如果出現(xiàn)了，就將自定義屬性內容賦予圖片的src屬性。

下面我們來具體談談實現(xiàn)步驟。
首先，我們需要定義函數(shù)返回瀏覽器的可視區(qū)域位置：

  /**
   * @description: 返回瀏覽器的可視區(qū)域位置
   * @return: left:左滑輪距離，top：上滑輪距離，width：可見區(qū)域寬度，height：可見區(qū)域長度
   */
   function getClient(){
    var l,t,w,h;
    l = document.documentElement.scrollLeft||document.body.scrollLeft;
    t = document.documentElement.scrollTop||document.body.scrollTop;
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
    return {left:l,top:t,width:w,height:h};
   }

然后定義函數(shù)返回待加載資源的位置：

/**
   * @description: 返回待加載資源位置
   * @params: p:需要加載的資源節(jié)點
   * @return: left:左邊距離，top：上邊距離，width：寬度，height：高度
   */
   function getSubClient(p){
    var l = 0, t = 0, w, h;
    w = p.offsetWidth;
    h = p.offsetHeight;
    while(p.offsetParent){
      l += p.offsetLeft;
      t += p.offsetTop;
      p = p.offsetParent;
    } 
    return {left:l,top:t,width:w,height:h};
   }

接下來定義函數(shù)，判斷兩個矩形區(qū)域是否相交：

  /**
   * @decription: 判斷兩個矩陣是否相交，返回一個布爾值
   * @params: rec1,rec2:需要比較的節(jié)點矩陣
   * @return: true： 兩矩陣相交
   */
   function contains(rec1,rec2){
    var lc1,lc2,tc1,tc2,w1,h1;
    lc1 = rec1.left + rec1.width/2;
    lc2 = rec2.left + rec2.width/2;
    tc1 = rec1.top + rec1.height/2;
    tc2 = rec2.top + rec2.height/2;
    w1 = (rec1.width + rec2.width)/2;
    h1 = (rec1.height + rec2.height)/2;
    return Math.abs(lc1 - lc2)<w1&&Math.abs(tc1 - tc2)<h1;
   }

最后對圖片資源進行監(jiān)視，如果進入用戶視野則加載資源：

   /**
   * @description: 資源出現(xiàn)在視野中再加載.將資源放入一個數(shù)組。
   */
   var arr = document.getElementsByClassName("divX");
   window.onscroll = function(){
    var prec1 = getClient();
    var prec2;
    for(var i = arr.length-1;i>=0;i--){
      if(arr[i]){
        prec2 = getSubClient(arr[i]);
        if(contains(prec1,prec2)){
          //加載資源
          console.log(arr[i].id);
          arr[i].childNodes[0].src = arr[i].childNodes[0].getAttribute("lazy_src");
          delete arr[i];
        }
      }
    }
   }

當然，這里只是講思路，如果用到工程上，還是有很多缺陷，比如性能和兼容性等。所以推薦一款jquery插件：lazyload

1、判斷css加載完成

這里順便說一下如何判斷一個web頁面的css文件加載完成。我們知道css通過外部文件引入，其實是一個link節(jié)點。所以我們只需要通過輪詢來判斷該link節(jié)點的sheet屬性或者sheet.cssRules屬性，就可以判斷該css文件是否完全加載成功。

2、判斷圖片加載完成

同樣的，img標簽有一個complete屬性，我們只需要通過輪詢來查看該屬性即可。

 function imgLoad(img, callback) {
      var timer = setInterval(function() {
        if (img.complete) {
          callback(img)
          clearInterval(timer)
        }
      }, 50)
    }
    imgLoad(img1, function() {
      p1.innerHTML('加載完畢')
    })

3、判斷javascript加載完成

那么如何判斷javascript加載完成呢？script節(jié)點的onload方法就是加載完成后執(zhí)行的。ie6和ie7則可通過readyState來判斷：

function include_js(file) {
  var _doc = document.getElementsByTagName('head')[0];
  var js = document.createElement('script');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', file);
  _doc.appendChild(js);
  if (!/*@cc_on!@*/0) { //if not IE
    //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
    js.onload = function () {
      alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
    }
  } else {
    //IE6、IE7 support js.onreadystatechange
    js.onreadystatechange = function () {
      if (js.readyState == 'loaded' || js.readyState == 'complete') {
        alert('IE6、IE7 support js.onreadystatechange');
      }
    }
  }
  return false;
}

以上就是本文的全部內容，希望對大家的學習有所幫助。

您可能感興趣的文章: