Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan teknik lanjutan untuk memuatkan imej yang malas

Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan teknik lanjutan untuk memuatkan imej yang malas

Lazy Loading ialah penambahbaikan Cara teknikal web prestasi halaman, terutamanya sesuai untuk halaman web yang mengandungi sejumlah besar imej. Dengan menggunakan HTML, CSS dan jQuery, kami boleh dengan mudah melaksanakan pemuatan malas imej untuk mempercepatkan pemuatan halaman web dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan ketiga-tiga teknologi ini untuk melaksanakan teknik lanjutan untuk memuatkan imej yang malas, dan memberikan contoh kod khusus.

1. Penyediaan HTML
Dalam HTML, kita perlu menggantikan atribut src setiap imej yang perlu dimuatkan secara malas dengan atribut data-src tersuai. Pada masa yang sama, untuk mencapai kesan pemuatan progresif imej, kami boleh menetapkan ruang letak.

<img data-src="path/to/image.jpg" src="path/to/placeholder.jpg" alt="image">

2. Tetapan gaya CSS
Untuk mengekalkan paparan imej pemegang tempat sebelum imej dimuatkan, kita perlu menggunakan CSS untuk menetapkan elemen img. Pada masa yang sama, untuk mencapai kesan pemuatan progresif, kita juga boleh menetapkan kesan peralihan.

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
img.loaded {
  opacity: 1;
}

3 Melaksanakan pemuatan malas dengan jQuery
Sangat mudah untuk melaksanakan pemuatan malas menggunakan jQuery. Kita boleh menggunakan acara $(window).on('scroll', function(){}) untuk mendengar acara menatal dan mencetuskan pemuatan malas dengan menentukan sama ada imej itu boleh dilihat.

$(window).on('scroll', function() {
  $('img').each(function() {
    if (isElementInViewport($(this)) && !$(this).hasClass('loaded')) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

Kod di atas akan mendengar acara tatal dan menilai setiap elemen img Jika elemen berada dalam kawasan yang boleh dilihat dan belum dimuatkan, nilai atribut data-src akan diberikan kepada. src. Dan tambahkan nama kelas yang dimuatkan untuk menandakan dimuatkan.

4. Pemuatan serpihan dan pengoptimuman prestasi
Untuk meningkatkan lagi prestasi, kami boleh membahagikan imej kepada berbilang serpihan untuk dimuatkan dan bukannya memuatkan semua imej sekaligus. Ini boleh mengelakkan masalah prestasi yang disebabkan oleh halaman meminta sejumlah besar imej sekaligus.

$(window).on('scroll', function() {
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();
  $('img:not(.loaded)').each(function() {
    if (isElementInViewport($(this), windowHeight, scrollTop)) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el, windowHeight, scrollTop) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= (scrollTop - windowHeight) &&
    rect.top <= (scrollTop + windowHeight * 2)
  );
}

Dalam kod di atas, kami menentukan sama ada setiap gambar berada dalam kawasan yang boleh dilihat dengan mendapatkan ketinggian tetingkap dan kedudukan bar skrol. Hanya imej dalam kawasan yang boleh dilihat akan dimuatkan.

Ringkasnya, dengan menggunakan HTML, CSS dan jQuery, kami boleh dengan mudah melaksanakan teknik lanjutan pemuatan malas imej dan meningkatkan kelajuan pemuatan dan pengalaman pengguna halaman web. Dengan menetapkan atribut data-src tersuai, gaya CSS dan pendengar acara jQuery, serta menggabungkan pemuatan serpihan dan pengoptimuman prestasi, kami boleh mengawal tingkah laku pemuatan imej dengan lebih fleksibel dan meningkatkan pengalaman pengguna dan prestasi halaman. Saya harap contoh kod yang disediakan dalam artikel ini berguna!

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