tetapan jquery tidak memuatkan ul

Dalam pembangunan web, gambar dan video merupakan elemen yang sangat diperlukan bagi halaman web, tetapi kadangkala disebabkan oleh sebab rangkaian, kelajuan pemuatan elemen ini akan menjadi sangat perlahan, menyebabkan halaman dimuatkan dengan perlahan atau malah ranap secara langsung. Dalam sesetengah kes, kami mungkin hanya perlu memaparkan beberapa gambar dan video, jadi bagaimana untuk menyediakannya? Artikel ini akan menggunakan jquery sebagai contoh untuk memperkenalkan cara menyediakan tidak memuatkan ul untuk mempercepatkan pemuatan halaman.

1. Latar belakang teknikal

Dalam pembangunan bahagian hadapan, jquery ialah salah satu rangka kerja JS yang paling biasa digunakan. Ia boleh membantu kami menyelesaikan pembangunan halaman web dengan cepat dan meningkatkan kecekapan pembangunan. Dalam jquery, kita boleh menulis kod untuk tidak memuatkan ul dan meningkatkan kelajuan memuatkan halaman.

2. Tetapkan kaedah tidak memuatkan ul

Dalam jquery, kita boleh menulis kod javascript untuk mencapai tidak memuatkan ul >

Cari div di mana teg ul terletak dan tambah "lazyLoad" pada kelas div, contohnya:

1. <div class="lazyLoad">

   Tulis kod berikut dalam jquery:

$(window).on("load",function(){
  $(".lazyLoad").each(function(){
    var totalHeight = $(this).height();
    $(this).find("img").each(function(){
      totalHeight -= $(this).height();
      if(totalHeight > 0){
        $(this).attr("src",$(this).data("src"));
      }
    });
    $(this).addClass("loaded");
  });
});

Salin selepas log masuk
2. Dalam kod di atas, kami mula-mula menggunakan $(window).on("load",function(){}) untuk mendengar peristiwa pemuatan tetingkap, dan kemudian melintasi setiap div mengandungi nama kelas .lazyLoad. Apabila merentasi setiap div, kami memperoleh jumlah ketinggian semua imej, dan kemudian menentukan imej yang mempunyai atribut src ditambah dengan menilai sama ada totalHeight lebih besar daripada 0. Jika totalHeight lebih besar daripada 0, tambahkan imej pada atribut src, jika tidak, imej tidak akan dimuatkan. Akhir sekali, kami menambah nama kelas yang dimuatkan pada div.
   Tambah kod berikut dalam css:

.lazyLoad img{
  opacity:0;
  transition:opacity 500ms ease-in-out;
}
.lazyLoad.loaded img{
  opacity:1;
}

Salin selepas log masuk
3. Dalam kod, kami menetapkan kelegapan kepada 0 untuk img .lazyLoad dan menambah animasi css. Selepas .lazyLoad memuatkan semua imej yang perlu dimuatkan, kami akan menambah nama kelas yang dimuatkan pada mereka Pada masa ini, kelegapan .lazyLoad.img akan ditukar kepada 1, dan semua imej dengan atribut src akan dipaparkan. .
   3. Demonstrasi Kesan

Untuk lebih memahami cara menyediakan bukan memuatkan UL, artikel ini telah menyediakan demonstrasi kesan untuk semua orang. Dalam halaman demo, terdapat 10 gambar, tetapi hanya 5 daripadanya akan dimuatkan, dan 5 lagi tidak akan dimuatkan. Membuka konsol, kita dapat melihat bahawa hanya 5 imej yang mempunyai atribut src ditambah, dan 5 imej lain belum dimuatkan.

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan jquery untuk menetapkan supaya tidak memuatkan ul, untuk mempercepatkan pemuatan halaman. Kami menggunakan kod javascript untuk melintasi div yang mengandungi nama kelas .lazyLoad, cari semua gambar yang perlu dimuatkan, tentukan sama ada gambar perlu dimuatkan dengan mengira perbezaan antara ketinggian gambar dan jumlah ketinggian, dan tambah nama kelas yang dimuatkan untuk melengkapkan kesan paparan.

Ringkasnya, ini adalah teknik pengoptimuman yang sangat praktikal dan saya harap ia akan membantu kerja pembangunan bahagian hadapan semua orang.

Atas ialah kandungan terperinci tetapan jquery tidak memuatkan ul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!