jQuery が遅延読み込みを実装する方法を詳しく説明する

1. 遅延読み込みが必要なのはなぜですか?

• 画像が多すぎる使用シナリオでは、ページの読み込み速度を向上させ、ユーザーエクスペリエンスを向上させるために、視野に表示されない画像は、視野に表示されるまで読み込まれません。 。

2. 遅延読み込みの実装原理

- 実装原理は非常に簡単です。まず、img の src を小さい画像に指定します。画像の実際のアドレスは、img のカスタム 属性に格納されます。 , , 画像が視野内に表示されるまで待ち、img 要素を取得し、src の値を src に代入します。

3. 遅延読み込みを実装するために必要な知識のポイント

(1) ウィンドウ、ウィンドウのスクロール、およびウィンドウの上部からの要素のオフセット高さを取得し、要素がウィンドウの表示範囲内に表示されるかどうかを計算します。

Paste_Image .png

    function isShow($el){
      var winH = $(window).height(),//获取窗口高度
            scrollH = $(window).scrollTop(),//获取窗口滚动高度
            top = $el.offset().top;//获取元素距离窗口顶部偏移高度
      if(top < scrollH + winH){
          return true;//在可视范围
        }else{
          return false;//不在可视范围
        }
      }

(2) ウィンドウのスクロール

イベント

を聞き、要素が表示範囲内にあるかどうかを確認します

    $(window).on('scroll', function(){//监听滚动事件
        checkShow();
    })
    checkShow();
    function checkShow(){//检查元素是否在可视范围内
        $('img').each(function(){//遍历每一个元素
            var $cur = $(this);
            if(!!isloaded($cur)){return;}//判断是否已加载
            if (isShow($cur)) {
              setTimeout(function(){
                showImg($cur);
                },300)//设置时间是为了更好的看出效果
            };
        });
    }

(3) 要素が表示されたら、前のデフォルトの写真を置き換えます。ソースの写真付き。

    function showImg($el){
        $el.attr('src', $el.attr('src'));
        $cur.data('isloaded',true);
    }

Paste_Image.png

Paste_Image.png

以上がjQuery が遅延読み込みを実装する方法を詳しく説明するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。