Cara menggunakan HTML, CSS dan jQuery untuk mencapai tatal tak terhingga senarai imej yang dimuatkan

Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan pemuatan tatal tak terhingga senarai imej

Dengan perkembangan Internet, penggunaan imej menjadi semakin meluas. Kami sering menghadapi situasi di mana kami perlu memaparkan sejumlah besar imej, seperti platform media sosial, tapak web e-dagang, dsb. Walau bagaimanapun, apabila memuatkan sejumlah besar imej, memuatkan semua imej sekali gus boleh menyebabkan halaman dimuatkan dengan perlahan atau malah ranap. Untuk menyelesaikan masalah ini, kita boleh menggunakan teknologi pemuatan tatal tak terhingga, juga dikenali sebagai "jatuh turun tak terhingga", supaya imej baharu dimuatkan hanya apabila pengguna menatal ke bahagian bawah halaman. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk melaksanakan senarai imej yang dimuatkan dengan tatal tak terhingga, dan memberikan contoh kod terperinci.

1. Struktur HTML
Pertama, kita perlu menyediakan bekas untuk memaparkan imej. Tambahkan senarai tidak tertib (<ul></ul>) pada HTML dan berikannya ID unik, seperti senarai imej. Setiap item imej diwakili oleh item senarai (<li>), dan URL imej akan disimpan sebagai atribut data-src item senarai. <ul></ul>），并给它一个唯一的ID，例如image-list。每个图片项都使用列表项（<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>

二、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;
}

三、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="Cara menggunakan HTML, CSS dan jQuery untuk mencapai tatal tak terhingga senarai imej yang dimuatkan" >元素添加到列表项中
    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="Cara menggunakan HTML, CSS dan jQuery untuk mencapai tatal tak terhingga senarai imej yang dimuatkan" >').addClass('loaded'); // 添加<img  alt="Cara menggunakan HTML, CSS dan jQuery untuk mencapai tatal tak terhingga senarai imej yang dimuatkan" >元素并标记为已加载
    }
  }
}

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

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

以上代码中，loadImages函数通过比较窗口高度、滚动条距离顶部的高度和文档总高度，判断是否滚动到了页面底部。当滚动到页面底部时，它会从data-src属性中获取未加载的图片URL，并将<img alt="Cara menggunakan HTML, CSS dan jQuery untuk mencapai tatal tak terhingga senarai imej yang dimuatkan" >元素添加到相应的列表项中，并添加一个类名loadedrrreee

2. Gaya CSS

Seterusnya, kita perlu menetapkan beberapa gaya CSS untuk menghiasi senarai imej dan mengawal paparan imej. Berikut ialah contoh:
rrreee

3 jQuery melaksanakan pemuatan tatal tak terhingga🎜Dalam jQuery, kita boleh menggunakan acara scroll untuk memantau kedudukan tatal halaman dan memuatkan imej baharu apabila menatal ke bawah daripada halaman. 🎜🎜Mula-mula, kita perlu mencipta fungsi yang dipanggil loadImages untuk memuatkan imej, dan kemudian memanggil fungsi ini apabila halaman dimuatkan dan ditatal. 🎜rrreee🎜Dalam kod di atas, fungsi loadImages menentukan sama ada ia telah menatal ke bahagian bawah halaman dengan membandingkan ketinggian tetingkap, ketinggian bar skrol dari atas dan jumlah ketinggian daripada dokumen tersebut. Apabila menatal ke bahagian bawah halaman, ia mendapat URL imej yang tidak dimuatkan daripada atribut data-src dan menambahkan elemen <img alt="Cara menggunakan HTML, CSS dan jQuery untuk mencapai tatal tak terhingga senarai imej yang dimuatkan" > pada item senarai yang sepadan , dan tambahkan nama kelas loaded untuk menandakan bahawa imej telah dimuatkan. 🎜🎜4. Ringkasan🎜Melalui pelaksanaan kod di atas, kami berjaya melaksanakan senarai imej tatal tanpa had menggunakan HTML, CSS dan jQuery. Pengguna hanya perlu menatal ke bahagian bawah halaman untuk memuatkan imej baharu secara automatik, dengan berkesan meningkatkan kesan paparan imej dan pengalaman pengguna. Dalam aplikasi sebenar, kami boleh terus mengoptimumkan dan mengembangkan kod mengikut keperluan, seperti menambah animasi pemuatan, mengoptimumkan pemuatan sumber, melaksanakan pemuatan malas imej, dsb., untuk meningkatkan prestasi halaman dan pengalaman pengguna. Kami berharap contoh dalam artikel ini dapat membantu pembaca memahami dengan lebih baik prinsip pelaksanaan dan kaedah pemuatan tatal tak terhingga, dan boleh menggunakannya secara fleksibel dalam amalan. 🎜

Atas ialah kandungan terperinci Cara menggunakan HTML, CSS dan jQuery untuk mencapai tatal tak terhingga senarai imej yang dimuatkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!