js は、Web ページを開く速度を向上させるために Web ページ画像の遅延読み込みを実装します

js は、Web ページを開く速度を向上させるために Web ページ画像の遅延読み込みを実装します_JavaScript スキル

WBOY

リリース： 2016-05-16 15:17:55

オリジナル

1634 人が閲覧しました

Web ページの読み込み速度を向上させる方法はたくさんあります。jquery.lazyload.js を使用して画像の非同期遅延読み込みを実装することは、画像がたくさんある Web サイトで Web ページを開く速度を向上させる良い方法です。ページ。 Code Jun Webサイトのコラムリストの左側に、PCでプレビューする際の記事サムネイル表示モジュールが表示されます。これにより、Webページの読み込み時間がある程度長くなります。この記事では、画像の非同期遅延読み込み方式を使用して、この Web サイトのページ読み込み速度を向上させています。

画像は非同期で読み込まれます。つまり、ページ上のすべての画像を一度に読み込んで表示する必要はありません。ユーザーがスクロールバーを特定の位置までスライドすると、対応する位置の画像が読み込まれ、表示されます。これにより、Web ページの読み込み速度がさらに向上します。

多くの写真を含む技術記事が多数あり、Web ページを開いたときにすべての写真を一度に読み込む必要がある場合、ユーザーは間違いなく非常に長い時間を待たなければなりません。このアプローチではユーザーエクスペリエンスが非常に悪くなりますが、ページ上のすべての画像を一度に読み込む必要はありません。画像の非同期遅延読み込みは、Web デザインにおいて最も合理的で適切なアプローチです。

画像の非同期遅延読み込みを実装するには、jquery.lazyload.js を使用します。最初に jQuery をロードすることを忘れないでください。

1. JS プラグインをインポートします:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.lazyload.js"></script>

ログイン後にコピー

2. ページに JavaScript コードを挿入します:

$(document).ready(function($){
$("img").lazyload({
placeholder:"grey.gif", //加载图片前的占位图片
effect:"fadeIn" //加载图片使用的效果(淡入)
});
});

ログイン後にコピー

上記の 2 つの手順により、Web ページ画像の非同期遅延読み込みを簡単に実装できます。

詳しくご紹介しましょう:
大きな Web サイトでは、ページに多数の画像が含まれている場合、対応する行までスクロールすると、ページを開いたときに現在の行の画像がすぐに読み込まれます。追加され、他の画像は追加されません。これにより、このソリューションはページの読み込みが高速化されます。

推奨: 画像遅延を実現するには、jquery 画像遅延読み込みプラグイン jquery.lazyload を使用します

実装原則:

遅延ロードする必要があるすべての画像を次の形式に変更します:

<img lazy_src="图片路径" border="0"/>

ログイン後にコピー

ページが読み込まれると、lazy_src を使用してすべての画像を配列に保存し、スクロール時に表示領域の上部を計算し、遅延して読み込まれた画像の上部を現在の表示領域よりも小さくします (つまり、画像表示領域に表示される画像の 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' &#63; 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) &#63; 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を入れてlazyLoad.initを呼び出します。 ();
からかいの方法では、firebug を使用して、一時イメージの読み込みが遅延していないかどうかを確認できます。
また:
ページにコンテンツが切り替わる列がある場合、切り替え時にコンテンツ内の画像が表示されない場合があります。解決策は、次のようにコンテンツ中に画像を個別に読み込むことです。

///切换内容的代码…
 
 chlid.find("img[init_src]").each(function(){
 
  $(this).attr("src",$(this).attr("init_src"));
 
  $(this).removeAttr("init_src");
 
 });

ログイン後にコピー

いわゆる

画像の非同期読み込み は、すべての画像を一度に読み込む必要がないことを意味し、遅延読み込みまたはバッファー読み込みと呼ぶことができます。

このニーズがあるかどうかを見てみましょう。記事内に多くの写真があるため、記事を読み込むときにすべての写真を読み込むと、間違いなく読み込み速度が遅くなり、ユーザーの待ち時間が長くなります。 Web ページがブラウザの視野内にある画像のみを読み込むことを許可するプラグインです。その範囲内に表示されない画像は一時的に読み込まれず、ユーザーがスライドすると徐々に読み込まれます。この効果を実現するには、スクロールバーを使用します。

Lazyload.js は実際には jQuery のプラグインであり、名前を見ただけでその機能がわかります。これは遅延読み込みを意味します。 JavaScript で書かれているので、WordPress を含むすべての Web ページに適しています。

Lazyload を使用したい場合は、まず jQuery をロードする必要があります。これは、効果を実現するために jQuery に依存します。

上記がこの記事の全内容です。Web ページ画像の遅延読み込みを実装するための js についての理解を深めていただければ幸いです。