CSSを使ってスクロール読み込み画像表示エフェクトを作成する実装手順

CSS を使用してスクロール読み込み画像表示効果を作成する方法の手順

Web テクノロジーの発展に伴い、スクロール読み込みは画像を表示する一般的な方法になりました。 CSS を使用すると、スクロール読み込み機能を備えた画像表示効果を実装でき、ユーザーがスクロールしている間に Web ページに新しい画像が自動的に読み込まれるようになり、ユーザー エクスペリエンスが向上します。

以下では、スクロール読み込み画像表示効果を実現するための具体的な手順を紹介し、対応するコード例を示します。

ステップ 1: HTML 構造の作成

まず、パッケージング コンテナーや画像リストなどの基本的な HTML 構造を作成する必要があります。

<div class="container">
  <ul class="image-list">
    <li><img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1"></li>
    <li><img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2"></li>
    <li><img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3"></li>
    <!-- 更多图片 -->
  </ul>
</div>

ステップ 2: CSS スタイルを設定する

次に、スクロール読み込みのニーズに適応できるように、コンテナーと画像リストの CSS スタイルを設定する必要があります。

.container {
  height: 500px; /* 设置容器的高度 */
  overflow-y: scroll; /* 设置垂直滚动 */
}

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

.image-list li {
  margin-bottom: 20px; /* 设置图片之间的间距 */
}

ステップ 3: CSS 疑似クラスを使用してスクロール監視を実装する

スクロール読み込み効果を実現するには、CSS 疑似クラス :after を使用する必要があります。スクロールイベントをリッスンします。

.container:after {
  content: "";
  display: block;
  height: 200px; /* 设置伪类的高度，用于触发滚动加载 */
  visibility: hidden;
}

ステップ 4: JavaScript を使用して画像をロードする

ローリング ローディングには画像の実際のロードが含まれるため、画像をロードするには JavaScript を使用する必要があります。

// 监听滚动事件
document.querySelector(".container").addEventListener("scroll", function() {
  var container = this;
  
  // 判断是否到达滚动加载的位置
  if (container.scrollHeight - container.scrollTop === container.clientHeight) {
    // 加载新的图片
    var imageList = document.querySelector(".image-list");
    var li = document.createElement("li");
    var img = document.createElement("img");
    
    img.src = "new_image.jpg";
    img.alt = "New Image";
    
    li.appendChild(img);
    imageList.appendChild(li);
  }
});

上記のコードは、ユーザーがページの一番下までスクロールすると、新しい画像を動的に追加します。

要約すると、上記の手順を通じて、CSS と JavaScript を使用して、スクロール読み込み画像表示効果を実現できます。新しい画像を動的に読み込むことで、Web ページの読み込み速度とユーザー エクスペリエンスを向上させることができます。

以上がCSSを使ってスクロール読み込み画像表示エフェクトを作成する実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。