javascript圖片延遲載入實作方法及思路_javascript技巧

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

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

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

一、延遲載入圖片

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

下面我們來具體談談實現步驟。
首先，我們需要定義函數傳回瀏覽器的視覺區域位置：

  /**
   * @description: 返回浏览器的可视区域位置
   * @return: left:左滑轮距离，top：上滑轮距离，width：可见区域宽度，height：可见区域长度
   */
   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};
   }

然後定義函數傳回待載入資源的位置：

/**
   * @description: 返回待加载资源位置
   * @params: p:需要加载的资源节点
   * @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};
   }

接下來定義函數，判斷兩個矩形區域是否相交：

  /**
   * @decription: 判断两个矩阵是否相交，返回一个布尔值
   * @params: rec1,rec2:需要比较的节点矩阵
   * @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;
   }

最後對圖片資源進行監視，如果進入使用者視野則載入資源：

   /**
   * @description: 资源出现在视野中再加载.将资源放入一个数组。
   */
   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節點。所以我們只需要透過輪詢來判斷該link節點的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節點的onload方法就是載入完成後執行的。 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;
}

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