画像の遅延読み込みとはどういう意味ですか?画像の遅延読み込みを実装する方法

この記事の内容は、画像の遅延読み込みとはどういう意味ですか?画像の遅延読み込みの実装方法は参考になると思います。

いわゆる遅延読み込みは、Web ページを開く速度を向上させ、より良いユーザー エクスペリエンスを得る手段です。選択範囲の重要な部分が最初にロードされ、重要性の低い部分は必要に応じてロードされます。たとえば、電子商取引 Web サイトの最初の画面には、通常、大量のデータ、高解像度のバナー、またはカルーセルが表示されます。ページの最初の画面以外の部分には、大量の写真とともに会員の製品が多数掲載されています。この場合、最初の画面のスムーズさを確保するために遅延読み込みを選択することが非常に重要です。

この記事は、画像の遅延読み込みの単なる例であり、少しの JS の基礎があれば、この方法は比較的単純で明確です。

これ以上ナンセンス

<img  alt="画像の遅延読み込みとはどういう意味ですか?画像の遅延読み込みを実装する方法" >

まず、最初の画面にない画像については、class="img-delay" と src 属性が追加され、後者は、元の URL アドレスの属性を配置するために使用されます。画像自体の src 属性については、空白のままにするか、Tmall のように「画像を表示できません」というリマインダー画像を追加できます:

次に行う必要があるのは、画像を表示することです。ユーザーがどこにスライドしても (少し前に表示が良くなります。ここでは事前に行いません)

//首先你需要引入一个 jQuery 库

//获取需要延迟加载的图片
var $picDelay = $(".img-delay");

//在 window 上监听滑动事件
$(window).scroll(function(){
  var scrollTop = $(window).scrollTop();    //滑块划过的距离
  var screenHeight = screen.height;     //屏幕浏览器内容部分的高度

  //计算每个图片的位置是否符合要求
  $picDelay.each(function(idx, ele){
    var $ele = $(ele);
    //当scrollTop + screenHeight === ele.offsetTop时图片刚好出现上边沿
    if(scrollTop + screenHeight >= ele.offsetTop){
      $ele.attr("src", $ele.attr("src")).removeAttr('src').removeClass("img-delay");
    }
  });

  //当所有图片都加载了以后，移除这个事件
  if($(".img-delay").length <p>関連する推奨事項: </p><p><a href="http://www.php.cn/js-tutorial-388508.html" target="_self"> 画像の遅延読み込みとプリロードについて詳しく説明しましょう </a><br></p><p><a href="http://www.php.cn/php-weizijiaocheng-337244.html" target="_self">php画像のカールキャプチャの遅延読み込み方法、アドバイスをお願いします</a></p><p class="comments-box-content"></p>

以上が画像の遅延読み込みとはどういう意味ですか?画像の遅延読み込みを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。