jsはウェブページのピクチャの遅延ロード(可視領域のロード)を実現する原理とコードはウェブサイトの開く速度を高めます

大規模なWebサイトを見ることがあります.ページに多くの画像がある場合、対応する行にスクロールすると、現在の行の画像がすぐにロードされます.そうすると、ページは可視領域のみの画像を開き、他の非表示の画像はロードされず、一定のプログラムでページのロード速度が速くなります.長いページでは、この案は比較的よい.推奨:jqueryピクチャを使用してプラグインjqueryのロードを遅延する.Lazyloadによるピクチャ遅延の実現
実装原理:そしてページロード時に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) ? 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をロードする必要があります.jQueryについては、ダウンロードする必要はありません.Googleサーバーに保存されているjQueryファイルに直接接続することができます.紛失の心配はありません(もちろん、Googleを完全に遮断する日があれば......)
特長:
wordpressサイトのページ読み込み速度を速める.
唐突でない画像の漸現方式;
コードは簡素で、操作とメンテナンスが便利で、JSコードは1.6 KBの前提条件は:あなたの局はJqueryをロードしました.js
原理:
この特効は、訪問者が現在の画像を表示しているかどうかを判断し、そうでなければ予約された充填画像greyをロードすることができるため、珍しく華やかで加速した効果である.gifは、訪問者がマウスホイールをスライドしたり、画像の位置を閲覧したりするまで、本当の画像アドレスがロードされません.
つまり、訪問者が瞬時にあなたのページを開き、瞬時に閉じて、フッターにある画像がロードされない場合、何を喜んでやらないのでしょうか.
訪問者への友好度を心配する必要はありません.この効果は、画像が閲覧される前に画像をロードし始めます.
実装方法:
jqueryをダウンロードします.lazyload.js
プリフィル画像fillをダウンロードします.gif
上の2つのファイルを、Webサイトのディレクトリに配置するか、外部で直接呼び出します.
現在のトピックのheader.phpで適当な位置に次のJS呼び出しコードを追加します.私が当期使っていたinoveテーマのバックグラウンドにはjsコードを追加する場所があります.
【一部はカスタマイズしてください】
[$(「img」)セクションでは、ページ内のどのimgが有効になるかを制限できます.たとえば、$(「.conntent img」)に変更します.
圧縮パッケージにはlazyloadを除く.jsのほかにgreyがいますgifピクチャファイル.この画像の役割は、ページに画像がロードされていない場合に、この画像を表示することです.JSファイルと画像をあなたの空間に伝えて、それからあなたのテーマのheader.phpファイルに追加