HTML, CSS dan jQuery: Petua untuk memuatkan imej yang malas

HTML, CSS dan jQuery: Petua untuk melaksanakan pemuatan imej yang malas

Dalam laman web moden, pemuatan imej yang malas ialah teknik pengoptimuman yang biasa digunakan, yang boleh meningkatkan prestasi pemuatan tapak web dan mengurangkan beban pada pelayan . Dengan malas memuatkan imej, anda boleh menjimatkan lebar jalur dan mempercepatkan pemuatan halaman dengan memuatkan imej hanya apabila pengguna menatal ke kawasan yang boleh dilihat. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk melaksanakan pemuatan malas imej, dan memberikan contoh kod khusus.

1. Struktur HTML
Pertama, dalam HTML kita perlu menambah pemegang tempat untuk setiap imej yang perlu dimuatkan dengan malas ini boleh menjadi elemen div biasa, dan menggunakan gaya CSS untuk menetapkan lebar dan ketinggian untuk mengekalkan halaman susun atur adalah stabil.

<div class="image-container">
  <div class="placeholder"></div>
  <img data-src="image.jpg" alt="Image">
</div>

Dalam kod di atas, bekas imej mewakili bekas imej dan tempat letak ialah ruang letak yang akan dipaparkan sebelum imej dimuatkan. Atribut data-src bagi teg img menyimpan alamat sebenar imej, manakala atribut alt menyediakan teks alternatif untuk imej. image-container表示图片的容器，placeholder是一个占位符，在图像加载之前会显示。img标签的data-src属性存储图像的真实地址，而alt属性则为图像提供替代文本。

二、CSS样式
接下来，我们需要为占位符和图像设置一些CSS样式。

.image-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 设置高度占比 */
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3; /* 设置占位符背景颜色 */
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 等比例缩放填充容器 */
  opacity: 0; /* 图像透明度为0，初始状态不显示 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

在上述代码中，.image-container使用了相对定位，设置了宽度为100%，高度为0，并通过padding-bottom属性设置了一个高度占比，可以根据具体需求进行调整。.placeholder设置了绝对定位，占满整个容器，并设置了背景颜色。img设置了绝对定位，将图像放置到容器的左上角，设置了宽度和高度为100%并使用object-fit来保持图像的比例，初始状态下透明度为0，并添加了过渡效果。

三、jQuery懒加载
最后，我们使用jQuery来实现图像的懒加载。需要在页面加载完毕后，当用户滚动到可见区域时，将图像的data-src属性值赋给src属性，并将透明度改为1，实现图像的显示。

$(window).on('scroll', function () {
  $('.image-container').each(function () {
    if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
      var $img = $(this).find('img');
      $img.attr('src', $img.data('src'));
      $img.css('opacity', 1);
    }
  });
});

上述代码中，当用户滚动页面时，使用offset().top获取每个图像容器的顶部位置，与scrollTop()和height()比较，判断是否已经滚动到可见区域。如果是，则将图像的data-src属性值赋给src

2. Gaya CSS

Seterusnya, kita perlu menetapkan beberapa gaya CSS untuk ruang letak dan imej.

rrreee

Dalam kod di atas, .image-container menggunakan kedudukan relatif, menetapkan lebar kepada 100%, ketinggian kepada 0 dan menetapkannya melalui padding-bottom atribut Nisbah ketinggian yang boleh dilaraskan mengikut keperluan tertentu. .placeholder menetapkan kedudukan mutlak, mengisi seluruh bekas dan menetapkan warna latar belakang. img menetapkan kedudukan mutlak, meletakkan imej di sudut kiri atas bekas, menetapkan lebar dan tinggi kepada 100% dan menggunakan object-fit untuk mengekalkan perkadaran imej, keadaan awal Turunkan ketelusan kepada 0 dan tambahkan kesan peralihan.

3. jQuery lazy loading🎜Akhir sekali, kami menggunakan jQuery untuk melaksanakan lazy loading imej. Ia adalah perlu untuk memberikan nilai atribut data-src imej kepada atribut src dan menukar ketelusan kepada 1 apabila pengguna menatal ke kawasan yang boleh dilihat selepas halaman itu dimuatkan. 🎜rrreee🎜Dalam kod di atas, apabila pengguna menatal halaman, gunakan offset().top untuk mendapatkan kedudukan teratas setiap bekas imej, yang sama dengan scrollTop() dan <code> height()Bandingkan untuk menentukan sama ada ia telah ditatal ke kawasan yang boleh dilihat. Jika ya, tetapkan nilai atribut data-src imej kepada atribut src dan tukar ketelusan kepada 1. 🎜🎜Pada ketika ini, kami telah menyelesaikan keseluruhan pelaksanaan pemuatan malas imej. Sebelum menggunakan teknik ini, ingat untuk memasukkan perpustakaan jQuery dan kod di atas supaya ia berjalan dengan betul. 🎜🎜Ringkasan🎜Artikel ini memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk melaksanakan pemuatan malas imej dan menyediakan contoh kod khusus. Dengan malas memuatkan imej, anda boleh meningkatkan prestasi pemuatan halaman web, mengurangkan tekanan pelayan dan memberikan pengalaman pengguna yang lebih baik. Saya harap artikel ini dapat membantu anda memahami dan mengaplikasikan teknik malas memuatkan imej dan menjadikannya berguna semasa membangunkan laman web. 🎜

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Petua untuk memuatkan imej yang malas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!