Ringkasan kaedah jQuery untuk menentukan sama ada imej dimuatkan_jquery

Untuk pemprosesan imej, seperti tayangan slaid, zum, dsb., semuanya bergantung pada operasi selepas semua imej selesai.

Hari ini, mari lihat cara untuk menentukan masa semua imej telah dimuatkan Sebelum pemuatan selesai, anda boleh menggunakan imej gif yang sedang dimuatkan untuk menunjukkan bahawa ia sedang dimuatkan.

1. Kaedah biasa

Dengar kaedah pemuatan img dan bandingkan setiap kali imej dimuatkan. Kod kunci adalah seperti berikut:

var num = $img.length;

$imgs.load(function() {
  num--;
  if (num > 0) {
    return;
  }
  console.log('load compeleted');
}

2. Gunakan objek Tertunda dalam jQuery

Objek tertunda ialah ciri baharu yang diperkenalkan daripada versi jQuery 1.5.0 Untuk pengenalan terperinci, sila lihat dokumentasi rasmi.

Ringkasnya, objek Tertunda ialah penyelesaian fungsi panggil balik jQuery Ia menyelesaikan masalah cara mengendalikan operasi yang memakan masa, menyediakan kawalan yang lebih baik ke atas operasi tersebut dan antara muka pengaturcaraan bersatu.

Ruan Yifeng mempunyai artikel yang memperkenalkan objek Tertunda Ia ditulis dengan lebih terperinci dan lebih berguna untuk bermula.

Penjelasan terperinci tentang objek tertunda jQuery

Di sini, kami menggunakan:

deferred.resolve(): Selesaikan objek Tertunda dan panggil sebarang doneCallbacks dengan hujah yang diberikan.
deferred.when(): Menyediakan cara untuk melaksanakan fungsi panggil balik berdasarkan satu atau lebih objek, biasanya Objek tertunda yang mewakili peristiwa tak segerak.
deferred.done(): Tambah pengendali untuk dipanggil apabila objek Tertunda diselesaikan.

Kod kunci:

var defereds = [];

$imgs.each(function() {
  var dfd = $.Deferred();

  $(this).load(dfd.resolve);
  defereds.push(dfd);
});
$.when.apply(null, defereds).done(function() {
  console.log('load compeleted');
});

Idea asas:

Setiap kali gambar dimuatkan, selesaikan(), apabila() laksanakan selesai() apabila semua Penangguhan selesai.

Nota: Oleh kerana parameter yang disokong oleh $.when ialah $.when(dfd1, dfd2, dfd3, ...), kami gunakan apply di sini untuk menerima parameter tatasusunan.

lengkap untuk menentukan sama ada imej dimuatkan

Terima kasih kepada Google, saya menemui kaedah yang berguna Penggunaan mudahnya ialah:

qim=new Image();//新建一个图片；
qim.src=$preload;//图片地址是你准备要加载的地址；
if(qim.complete){ $("#cxNfloor").html($filetoload);//qim.complete表示这个图片是否加载完毕了
}

Kemudian saya menemui satu kaedah

$("").load(function(){...});

Pemilih ialah id atau kelas imej, dan kaedah dalam fungsi ialah fungsi panggil balik, yang dilaksanakan selepas imej dimuatkan Namun, saya telah mencuba banyak dan ia tidak berlaku sama sekali. Penyelesaian yang betul ialah:

//jquery的方式
$("#imageId").load(function(){
  alert("加载完成！");
});

Kawan kata menggunakan js adalah yang terbaik, kaedahnya seperti berikut

Cari sekeping kod dalam talian
Contoh

function loadImage(url, callback) {
 var img = new Image(); //创建一个Image对象，实现图片的预下载
 img.src = url;
 
 if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
   callback.call(img);
   return; // 直接返回，不用再处理onload事件
  }
 img.onload = function () { //图片下载完毕时异步调用callback函数。
    callback.call(img);//将回调函数的this替换为Image对象
  };
};

Berikut ialah pertimbangan pemuatan untuk berbilang imej.

var imgdefereds=[];
$('img').each(function(){
 var dfd=$.Deferred();
 $(this).bind('load',function(){
 dfd.resolve();
 }).bind('error',function(){
 //图片加载错误，加入错误处理
 // dfd.resolve();
 })
 if(this.complete) setTimeout(function(){
 dfd.resolve();
 },1000);
 imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
  callback();
});

Menggunakan kaedah ini boleh mengelakkan kekurangan window.onload, tetapi kodnya agak rumit dan prestasinya jauh lebih baik daripada window.onload.