jQuery malas memuatkan imej pemalam Lazy Load panduan penggunaan_jquery

Lazy Load ialah pemalam jQuery yang ditulis dalam JavaScript Ia boleh melambatkan pemuatan imej dalam halaman yang panjang. Imej di luar kawasan yang boleh dilihat oleh pelayar tidak akan dimuatkan sehingga pengguna menatal halaman tersebut bertentangan dengan cara pramuat imej dikendalikan.

Malas memuatkan imej pada halaman panjang yang mengandungi banyak imej besar boleh mempercepatkan pemuatan halaman Penyemak imbas akan memasuki keadaan sedia selepas memuatkan imej yang boleh dilihat.

Bagaimana untuk menggunakan?

Lazy Load bergantung pada jQuery Sila tambahkan kod berikut pada kawasan kepala halaman:

Salin kod Kod adalah seperti berikut:

Anda mesti mengubah suai kod HTML Tetapkan imej simbol gerai dalam atribut src Halaman demo menggunakan imej GIF kelabu 1×1 dan anda perlu menetapkan URL imej sebenar kepada atribut asal . Di sini anda boleh mentakrifkan kelas tertentu untuk Dapatkan objek imej yang perlu dimuatkan dengan malas Dengan cara ini anda boleh mengawal ikatan pemalam.

Salin kod Kod adalah seperti berikut:

Kod untuk memproses imej adalah seperti berikut.

Salin kod Kod adalah seperti berikut:

$("img.lazy").lazyload();

Ini akan menyebabkan semua imej dengan kelas malas dimuatkan dengan malas Anda boleh merujuk kepada demo pilihan asas

Tetapkan sensitiviti

JavaScript didayakan dalam hampir semua penyemak imbas Walau bagaimanapun, anda mungkin masih mahu memaparkan imej sebenar pada pelanggan yang tidak menyokong JavaScript Untuk merendahkan dengan anggun apabila penyemak imbas tidak menyokong JavaScript, anda boleh menulis serpihan imej sebenar

Salin kod Kod adalah seperti berikut:

Pemegang tempat boleh disembunyikan melalui CSS.

Salin kod Kod adalah seperti berikut:

.malas {
paparan: tiada;
}

Dalam penyemak imbas yang menyokong JavaScript, anda mesti memaparkan pemegang tempat apabila DOM sedia, yang boleh dilakukan pada masa yang sama semasa pemalam dimulakan.

Salin kod Kod adalah seperti berikut:

$("img.lazy").show().lazyload();

Ini adalah pilihan, tetapi perlu dilakukan jika anda mahu pemalam anda menurun taraf dengan lancar.

Secara lalai, imej akan dimuatkan apabila ia muncul pada skrin Jika anda ingin memuatkan imej terlebih dahulu, anda boleh menetapkan pilihan ambang kepada 200 untuk membuat imej dimuatkan lebih awal apabila ia adalah 200 piksel jauh dari skrin

Salin kod Kod adalah seperti berikut:

$("img.lazy").lazyload({ ambang : 200 });

Imej pemegang tempat

Anda juga boleh menetapkan imej pemegang tempat dan menentukan peristiwa untuk mencetuskan tindakan pemuatan Pada masa ini, anda perlu menetapkan alamat URL untuk imej 1×1 piksel telus, kelabu dan putih sudah disertakan dalam pemalam Di Dalam.

Acara mencetuskan pemuatan

Acara ini boleh menjadi sebarang acara jQuery, seperti: klik dan alih tetikus Anda juga boleh menggunakan acara tersuai, seperti: sporty dan foobar Secara lalai, ia berada dalam keadaan menunggu sehingga pengguna menatal ke kedudukan gambar pada tetingkap berwarna kelabu Untuk mengelakkan imej pemegang tempat daripada dimuatkan sehingga ia diklik, anda boleh melakukan ini:

Salin kod Kod adalah seperti berikut:

$("img").lazyload({
Pemegang tempat: "img/grey.gif",
Acara: "klik"
});

Gunakan kesan khas

Apabila imej dimuatkan sepenuhnya, pemalam menggunakan kaedah show() secara lalai untuk memaparkan imej, sebenarnya, anda boleh menggunakan sebarang kesan khas yang anda ingin proseskan Kod berikut menggunakan kesan FadeIn ialah halaman tunjuk cara

Salin kod Kod adalah seperti berikut:

$("img.lazy").lazyload({
Kesan: "fadeIn"
});

Gambar berada di dalam bekas

Anda boleh menggunakan pemalam pada imej dalam bekas boleh ditatal, seperti elemen DIV dengan bar skrol yang anda perlu lakukan ialah menentukan bekas sebagai objek jQuery dan menghantarnya sebagai parameter kepada kaedah permulaan halaman demo menatal mendatar dan halaman demo menatal menegak.

Salin kod Kod adalah seperti berikut:

#bekas {
Tinggi: 600px;
Limpahan: tatal;
}
$("img.lazy").lazyload({    
bekas: $("#bekas")
});

Apabila gambar tidak disusun mengikut urutan

Apabila menatal halaman, Lazy Load akan melingkar melalui imej yang dimuatkan Dalam gelung, ia akan mengesan sama ada imej berada dalam kawasan yang boleh dilihat secara lalai, gelung akan berhenti apabila imej pertama yang tidak kelihatan kawasan ditemui. Imej dianggap Teragih dengan lancar, susunan imej dalam halaman adalah sama dengan susunan dalam kod HTML Tetapi dalam beberapa reka letak, andaian ini tidak benar pilihan had kegagalan

Salin kod Kod adalah seperti berikut:

$("img.lazy").lazyload({
Had_kegagalan : 10
});

Tetapkan had kegagalan kepada 10 supaya pemalam akan berhenti mencari selepas menemui 10 imej yang tidak berada dalam kawasan yang boleh dilihat Jika anda mempunyai reka letak yang menyusahkan, sila tetapkan parameter ini lebih tinggi.

Malas memuatkan imej

Fungsi pemalam Lazy Load yang tidak lengkap, tetapi ia juga boleh digunakan untuk melaksanakan pemuatan malas imej Kod berikut melaksanakan pemuatan selepas halaman dimuatkan, imej dalam kawasan yang ditentukan akan Dimuatkan secara automatik Ini adalah halaman demo memuatkan malas.

Salin kod Kod adalah seperti berikut:

$(fungsi() {                                                  $("img:below-the-fold").lazyload({
        acara: "bersukan"
}); }); $(window).bind("load", function() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000 });

Memuatkan imej tersembunyi

Mungkin terdapat banyak gambar tersembunyi yang terkubur pada halaman anda Contohnya, jika pemalam digunakan untuk menapis senarai, anda boleh mengubah suai status paparan setiap item dalam senarai secara berterusan Muatkan mengabaikan gambar tersembunyi secara lalai Jika anda ingin memuatkan imej tersembunyi, sila tetapkan skip_invisible kepada false

Salin kod Kod adalah seperti berikut:

$("img.lazy").lazyload({

Langkau_halimunan : palsu
});

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Bitte nehmen Sie sich einen Moment Zeit, um den Artikel mit Ihren Freunden zu teilen oder einen Kommentar zu hinterlassen. Für Ihre Unterstützung danken wir Ihnen herzlich!