JavaScript進級--ピクチャーの怠惰なロード

怠惰なロード技術
画像はネットワーク負荷に対して他のリソースと比較して非常に大きく、またウェブページ全体の画像はすべてのものではなく、最初の時間にユーザに提示されることが多い.怠惰負荷はその解決策の一つである(本質的には遅延負荷である).
怠惰ロードの原理

は、ビットマップを占めるタグのsrc属性を設定します.

は、本当に絵のurlであるタグのカスタム属性data-srcを設定します.

ページのローディングが完了したら、あなたが設定したタイミングに応じてSrcを交換します.効果図:
すべてのページを取得します.

  var imgNode = document.querySelectorAll('img'),
      imgArr = Array.prototype.slice.call(imgNode,0),
      imgInfo = [];
  for (var i = 0, max = imgArr.length; i < max; i++) {
    var temp = {};
    temp.img = imgArr[i];
    temp.flag = false;
    imgInfo.push(temp);
  }

設計のlazyload方法:

  function lazyLoad() {
    /**
     *                     ，       。
     * （     ，               ）
     *  (                  )
     */
    for (var i = 0, max = imgInfo.length; i < max; i++) {
      /**
       *   for  
       */
      if (!imgInfo[i].flag) {
        /**
         * poi:              
         * y:         
         */
        var poi = getElementPoistionInWinow(imgInfo[i].img),
            y = getDocumentScroll().y;
        //       
        if (poi.y > y && poi.y < y + window.innerHeight) {
          if (imgInfo[i].img.getAttribute('src') === 'images/place.png') {
            imgInfo[i].img.src = imgInfo[i].img.getAttribute('data-src');
            imgInfo[i].flag = true;
          }
        }
      }
    }
  }

ページ全体の要素の座標を取得します.

  function getElementPoistionInWinow(ele) {
    var top = 0,
        left = 0,
        width = ele.offsetWidth, //     
        height = ele.offsetHeight; //     
    while(ele) {
      top += ele.offsetTop;
      left += ele.offsetLeft;
      ele = ele.offsetParent; //      
    }
    return {
      y: top,
      x: left,
      width: width,
      height: height,
    }
  }

スクロールバーのオフセットを取得:

  /**
   *       
   */
  function getDocumentScroll() {
    var x,
        y;
    x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
    y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    return {
      x: x,
      y: y,
    }
  }

undefscore.jsの関数節流を採用します.

  window.addEventListener('scroll',_.throttle(lazyLoad,1000 / 60), false);

ローディングイベントに追加することを忘れないでください.

  /**
   * DOMContentLoaded     ，             。
   */
  document.addEventListener('DOMContentLoaded', lazyLoad, false);

githubソースアドレス