javascript画像の読み込みが遅延されました.

今日はどのようにjavascriptを通じて画像のロードを遅延するかを説明します.
一つのページに大量の画像が含まれている場合、最初から画像を全部ロードしたら、性能と効率の問題を引き起こします.ユーザーは待ち時間があまりにも長いので、離れてしまうかもしれません.
この時、私達は怠惰な負荷を利用しなければなりません.つまり画像のロードを遅延させて、ウェブサイトの親和力を高めます.
画像の読み込み遅延
基本的な考え方は次の通りです.遅延負荷が必要な画像にはlazy-srcなどのカスタム属性を設定して、画像ソースの場所があります.そして、怠惰なロードが必要なすべての画像を一つの配列に入れて、window.onscrollの時にこの配列の内容がユーザーの視線の中に現れているかどうかを判断します.もし出現したら、ユーザー定義の属性内容を画像のsrc属性に与えます.
これから具体的に実現のステップについて話しましょう.まず、関数を定義してブラウザの可視領域の位置を返す必要があります.

    /** * @description:              * @author:   * @date:2015/10/24 9:56 * @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:           * @author:   * @date:2015/10/24 10:05 * @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:           ，        * @author:   * @date:2015/10/24 10:23 * @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.
cssロードが完了したと判断します.
ちなみに、ウェブページのcssファイルのロードが完了したとどう判断しますか?cssは外部ファイルを通して導入されることを知っていますが、実はlinkノードです.したがって、我々はポーリングによって、このリンクノードのsheet属性またはsheet.cRules属性を判断するだけで、cssファイルが完全にロードされたかどうかを判断することができる.
画像の読み込みが完了したと判断します.
同じように、imgタグにはコンプレックス属性があります.ポーリングで属性を確認すればいいです.

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

javascriptのロードが完了したと判断します.
javascriptのロードが完了したとどう判断しますか?スクリプトノードのonload方法はロード完了後に実行されます.ie 6とie 7は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;
}