HTML、CSS、jQueryを使用して、読み込まれた画像リストの無限スクロールを実現する方法

HTML、CSS、jQuery を使用して、読み込まれた画像リストの無限スクロールを実装する方法

インターネットの発展に伴い、画像の使用はますます普及しています。 。ソーシャルメディアプラットフォームや電子商取引ウェブサイトなど、大量の画像を表示する必要がある状況によく遭遇します。ただし、大量の画像をロードする場合、すべての画像を一度にロードすると、ページのロードが遅くなったり、クラッシュしたりする可能性があります。この問題を解決するには、「無限ドロップダウン」とも呼ばれる無限スクロール読み込みテクノロジを使用して、ユーザーがページの一番下までスクロールしたときにのみ新しい画像が読み込まれるようにすることができます。この記事では、HTML、CSS、jQuery を使用して無限スクロールの読み込まれた画像リストを実装する方法を紹介し、詳細なコード例を示します。

1. HTML 構造
まず、画像を表示するためのコンテナを設定する必要があります。順序なしリスト (<ul></ul>) を HTML に追加し、image-list などの一意の ID を付けます。各画像項目はリスト項目 (<li>) で表され、画像の URL はリスト項目の data-src 属性として保存されます。

<ul id="image-list">
  <li data-src="image1.jpg"></li>
  <li data-src="image2.jpg"></li>
  <li data-src="image3.jpg"></li>
  <!-- 其他图片项 -->
</ul>

2. CSS スタイル
次に、画像リストを装飾し、画像の表示を制御するためにいくつかの CSS スタイルを設定する必要があります。以下は例です:

#image-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#image-list li {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
}

#image-list li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. jQuery は無限スクロール読み込みを実装します
jQuery では、scroll イベントを使用してページのスクロール位置を監視し、次の位置までスクロールできます。新しい画像を読み込むときにページの下部に表示されます。

まず、画像をロードするために loadImages という関数を作成し、ページがロードされてスクロールされるときにこの関数を呼び出す必要があります。

function loadImages() {
  var windowHeight = $(window).height(); // 当前窗口的高度
  var scrollHeight = $(document).height(); // 文档的总高度
  var scrollTop = $(window).scrollTop(); // 滚动条距离顶部的高度

  // 当滚动到页面底部时加载新的图片
  if (scrollTop + windowHeight == scrollHeight) {
    var imageList = $('#image-list');
    var imagesToLoad = 10; // 每次加载的图片数量

    // 根据需要加载的图片数量，从data-src属性中获取对应的图片URL，然后将<img  alt="HTML、CSS、jQueryを使用して、読み込まれた画像リストの無限スクロールを実現する方法" >元素添加到列表项中
    for (var i = 0; i < imagesToLoad; i++) {
      var nextImage = imageList.find('li:not(.loaded)').first(); // 找到未加载的下一张图片
      var imgUrl = nextImage.data('src'); // 获取图片URL
      nextImage.append('<img  src="' + imgUrl + '" alt="HTML、CSS、jQueryを使用して、読み込まれた画像リストの無限スクロールを実現する方法" >').addClass('loaded'); // 添加<img  alt="HTML、CSS、jQueryを使用して、読み込まれた画像リストの無限スクロールを実現する方法" >元素并标记为已加载
    }
  }
}

// 页面加载完成时加载初始图片
$(document).ready(function() {
  loadImages();
});

// 当页面滚动时加载更多图片
$(window).scroll(function() {
  loadImages();
});

上記のコードでは、loadImages 関数は、ウィンドウの高さ、スクロール バーの上部からの高さを比較することにより、ページの下部までスクロールしたかどうかを判断します。およびドキュメントの合計の高さ。ページの一番下までスクロールすると、data-src 属性からアンロードされた画像の URL が取得され、対応するリスト項目に <img alt="HTML、CSS、jQueryを使用して、読み込まれた画像リストの無限スクロールを実現する方法" > 要素が追加され、クラスが追加されます。 name loaded と入力して、イメージをロード済みとしてマークします。

4. 概要
上記のコードの実装により、HTML、CSS、jQuery を使用して無限スクロール画像リストを実装することに成功しました。ユーザーはページの一番下までスクロールするだけで新しい画像が自動的に読み込まれるため、画像の表示効果とユーザー エクスペリエンスが効果的に向上します。実際のアプリケーションでは、読み込みアニメーションの追加、リソース読み込みの最適化、画像の遅延読み込みの実装など、ニーズに応じてコードをさらに最適化および拡張して、ページのパフォーマンスとユーザー エクスペリエンスを向上させることができます。この記事の例が、読者が無限スクロール ローディングの実装原理と方法をより深く理解し、実際に柔軟に適用できるようになることを願っています。

以上がHTML、CSS、jQueryを使用して、読み込まれた画像リストの無限スクロールを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。