Bagaimana untuk melaksanakan pramuat imej dan pemuatan tertunda dengan Jquery

Contoh dalam artikel ini menerangkan cara Jquery melaksanakan pramuat imej dan pemuatan tertunda. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Terdapat banyak projek yang selalunya perlu menentukan sama ada untuk melaksanakan operasi yang sepadan selepas imej dimuatkan, atau melambatkan pemuatan imej Walaupun sudah ada pemalam yang sangat baik di Internet, ia sentiasa berasa janggal perlu memuatkan pemalam yang berasingan untuk kesan ini, saya baru sahaja menulis kaedah sendiri:

Salin kod Kod adalah seperti berikut:

function loadimg(arr,funLoading,funOnLoad,funOnError){

var numLoaded=0,

numError=0,

isObject=Object.prototype.toString.call(arr)==="[objek Objek]" ?

var arr=isObject ? arr.get() : arr;

untuk(a dalam arr){

var src=isObject ? $(arr[a]).attr("data-src") : arr[a];

pramuat(src,arr[a]);

}

pramuat fungsi(src,obj){

var img=Imej baharu();

img.onload=function(){

numLoaded ;

funLoading && funLoading(numLoaded,arr.length,src,obj);

funOnLoad && numLoaded==arr.length && funOnLoad(numError);

};

img.onerror=function(){

numLoaded ;

numError ;

funOnError && funOnError(numLoaded,arr.length,src,obj);

}

img.src=src;

}

}

Perihalan parameter:
arr: Ia boleh menjadi tatasusunan untuk menyimpan laluan imej, atau ia boleh menjadi objek jquery bagi img yang dipilih; funLoading: Operasi yang dilakukan selepas setiap imej individu dimuatkan; funOnLoad: Operasi selepas semua imej dimuatkan; funOnError: Operasi apabila ralat memuatkan imej tunggal berlaku.

Contohnya:

Salin kod

Kod adalah seperti berikut:var imgonload=function(errors){ /*errors: Bilangan gambar dengan ralat pemuatan;*/ console.log("dimuatkan," ralat " ralat dimuatkan imej!");

}

var funloading=function(n,total,src,obj){

         /*

n: Bilangan item yang dimuatkan;
            jumlah: jumlah bilangan imej yang akan dimuatkan;
                                                                                                                                                                                                                                                                                               Dengan laluan imej yang dimuatkan semasa;
obj: Apabila arr diluluskan dalam fungsi loadimg ialah tatasusunan yang menyimpan laluan imej, obj=src ialah laluan imej, 

Apabila arr ialah objek jquery, obj ialah objek img dom yang sedang dimuatkan. 

*/

console.log(n "daripada" jumlah " gambar dimuatkan.",src);

var newimg = document.createElement("img");

newimg.src=src;

$("body").append(newimg).fadeIn();

}

var funloading_obj=function(n,total,src,obj){

console.log(n "daripada" jumlah " gambar dimuatkan.",src);

$(obj).attr("src",src);

$(obj).fadeIn(200);

}

var funOnError=function(n,total,src,obj){

console.log("the " n "st img loaded Ralat!");

}

Contoh panggilan: 

Salin kod

Kod adalah seperti berikut:

console.log("loading..."); loadimg($("img"),funloading_obj,imgonload,funOnError); /*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg", "/20120531/1670912_103610084349_2.jpg", "/20120616/4952071_130629530136_2.jpg", "/20120610/1723580_105037029000_2.jpg",

"http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"

],funloading,imgonload,funOnError);*/

Di atas ialah kaedah penulisan asal Seterusnya kami memperkenalkan pemalam jQuery untuk pemuatan malas imej berdasarkan Lazy Load

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 1x1 Dan anda perlu menetapkan URL imej sebenar kepada atribut asal data kelas tertentu untuk mendapatkan objek imej yang malas dengan cara ini anda boleh mengawal pengikatan 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

Pemegang tempat boleh disembunyikan melalui CSS.

Salin kod Kod adalah seperti berikut:

.malas {

paparan: tiada;

}

Dalam penyemak imbas yang menyokong JavaScript, anda mesti memaparkan ruang letak 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 diturunkan taraf dengan anggun.

Tetapkan sensitiviti

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 terlebih dahulu 200 piksel jauh dari skrin

Salin kod Kod adalah seperti berikut:

$("img.lazy").lazyload({ threshold : 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 1x1 piksel telus, kelabu dan putih sudah disertakan dalam palam. masuk.

Pemuatan tercetus peristiwa

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"
});

Imej 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 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:

$(function() {

$("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({