Bagaimana untuk melaksanakan pemuatan malas imej responsif menggunakan sifat CSS

Cara melaksanakan pemuatan malas imej responsif menggunakan sifat CSS

Dalam pembangunan web, kita sering menghadapi situasi di mana sejumlah besar imej perlu dimuatkan terutamanya pada peranti mudah alih. Untuk meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna, pemuatan imej yang malas telah menjadi kaedah pengoptimuman yang biasa.

Lazy loading bermaksud apabila halaman dimuatkan, hanya imej dalam kawasan yang boleh dilihat dimuatkan dan bukannya memuatkan semua imej pada keseluruhan halaman. Ini sangat mengurangkan masa yang diperlukan untuk pemuatan awal dan mengelakkan pembaziran lebar jalur yang tidak perlu.

Dalam artikel ini, kami akan memperkenalkan kaedah menggunakan sifat CSS untuk mencapai pemuatan malas imej responsif, yang boleh digunakan pada pelbagai saiz skrin dan peranti.

Pertama, kita perlu menentukan imej yang perlu malas dimuatkan dalam HTML. Di sini kami menggunakan elemen <img class="lazy-image lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Bagaimana untuk melaksanakan pemuatan malas imej responsif menggunakan sifat CSS" > dan menetapkan atribut tersuai data-src untuk menyimpan URL sebenar imej. <img class="lazy-image lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Bagaimana untuk melaksanakan pemuatan malas imej responsif menggunakan sifat CSS" >元素，并设置一个自定义的属性data-src来存储图像的实际URL。

<img class="lazy-image lazy" src="/static/imghw/default1.png" data-src="image.jpg" data- alt="Image">

接下来，我们需要编写CSS样式来隐藏初始的图像，并通过使用background-size属性设置图像的背景图片。

.lazy-image {
  background-image: url(placeholder.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

在上面的代码中，placeholder.jpg是一个占位图像，用于在实际图像加载完成之前显示。

然后，我们使用CSS属性@media来针对不同的屏幕尺寸定义不同的样式。

/* 对于大屏幕设备，立即加载图像 */
@media screen and (min-width: 1024px) {
  .lazy-image {
    background-image: none;
  }
}

/* 对于小屏幕设备，延迟加载图像 */
@media screen and (max-width: 1023px) {
  .lazy-image {
    visibility: hidden;
  }
  
  .lazy-image[data-src] {
    visibility: visible;
  }
}

在上述代码中，我们使用@media指令将屏幕宽度分为两个范围：大于等于1024px和小于1024px。对于大屏幕设备，我们立即加载图像，将background-image设置为none。对于小屏幕设备，我们将.lazy-image的visibility属性设置为hidden，同时为带有data-src属性的.lazy-image元素设置visibility属性为visible，这样就可以实现延迟加载图像。

最后，我们需要使用JavaScript来实现图像的实际加载。

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll(".lazy-image");

  const lazyLoad = function() {
    lazyImages.forEach(function(img) {
      if (img.getBoundingClientRect().top <= window.innerHeight && img.hasAttribute("data-src")) {
        img.setAttribute("src", img.getAttribute("data-src"));
        img.removeAttribute("data-src");
      }
    });
  };

  window.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

上述代码中，我们使用document.querySelectorAll获取所有带有.lazy-image类的元素，并定义一个lazyLoad函数来判断图像是否在可见区域内，如果是则加载图像。

最后，我们将lazyLoadrrreee

Seterusnya, kita perlu menulis gaya CSS untuk menyembunyikan imej awal dan menetapkan imej latar belakang imej dengan menggunakan sifat saiz latar belakang.

rrreee

Dalam kod di atas, placeholder.jpg ialah imej pemegang tempat yang digunakan untuk memaparkan sehingga imej sebenar dimuatkan. #🎜🎜##🎜🎜#Kemudian, kami menggunakan atribut CSS @media untuk menentukan gaya berbeza untuk saiz skrin yang berbeza. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami menggunakan arahan @media untuk membahagikan lebar skrin kepada dua julat: lebih besar daripada atau sama dengan 1024px dan kurang daripada 1024px. Untuk peranti skrin besar, kami memuatkan imej dengan serta-merta, menetapkan background-image kepada none. Untuk peranti skrin kecil, kami menetapkan atribut visibility .lazy-image kepada hidden dan menetapkan data-src.lazy-image atribut /code> menetapkan atribut visibility kepada visible, supaya pemuatan malas imej boleh dicapai. #🎜🎜##🎜🎜#Akhir sekali, kita perlu menggunakan JavaScript untuk memuatkan imej sebenarnya. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami menggunakan document.querySelectorAll untuk mendapatkan semua elemen dengan kelas .lazy-image dan mentakrifkan Fungsi lazyLoad menentukan sama ada imej berada dalam kawasan yang boleh dilihat dan jika ya, memuatkan imej. #🎜🎜##🎜🎜#Akhir sekali, kami mengikat fungsi lazyLoad pada skrol penyemak imbas, perubahan saiz tetingkap dan peristiwa perubahan orientasi skrin supaya fungsi pemuatan dicetuskan apabila halaman menatal atau menukar saiz. #🎜🎜##🎜🎜#Di atas ialah kaedah dan contoh kod yang sepadan menggunakan sifat CSS untuk melaksanakan pemuatan malas imej responsif. Melalui kaedah ini, kami boleh mengoptimumkan kelajuan memuatkan halaman web, meningkatkan pengalaman pengguna, dan mengelakkan pembaziran lebar jalur yang tidak perlu. #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemuatan malas imej responsif menggunakan sifat CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!