acara jQuery untuk gambar yang dimuat

Apakah mungkin untuk mendeteksi ketika semua gambar dimuat melalui acara jQuery?

Idealnya, harus ada

$(document).idle(function()
{
}

atau

$(document).contentLoaded(function()
{
}

Tetapi saya tidak dapat menemukan hal seperti itu.

Saya berpikir untuk melampirkan acara seperti ini:

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

Tetapi apakah ini akan rusak jika gambar gagal dimuat? Sangat penting untuk metode yang akan dipanggil, dan pada waktu yang tepat.

Sesuai dokumentasi jQuery , ada sejumlah peringatan untuk menggunakan event load dengan gambar. Seperti dicatat dalam jawaban lain, plugin ahpi.imgload.js rusak, tetapi inti Paul Irish yang tertaut tidak lagi dipertahankan.

Menurut Paul Irish, plugin kanonik untuk mendeteksi peristiwa pemuatan gambar selesai sekarang ada di:

https://github.com/desandro/imagesloaded

Jika Anda ingin memeriksa tidak semua gambar, tetapi gambar tertentu (mis. Gambar yang Anda ganti secara dinamis setelah DOM selesai) Anda dapat menggunakan ini:

$('#myImage').attr('src', 'image.jpg').on("load", function() {  
  alert('Image Loaded');  
});  

Anda dapat menggunakan plugin saya waitForImages untuk menangani ini ...

$(document).waitForImages(function() {
   // Loaded.
});

Keuntungannya adalah Anda dapat melokalkannya ke satu elemen leluhur dan secara opsional dapat mendeteksi gambar yang direferensikan di CSS.

Ini hanyalah puncak gunung es, periksa dokumentasi untuk fungsionalitas lebih lanjut.

Penggunaan jQuery $ (). Load () sebagai pengendali kejadian IMG tidak dijamin. Jika gambar dimuat dari cache, beberapa browser mungkin tidak mengaktifkan acara tersebut. Dalam kasus Safari versi (lebih lama?), Jika Anda mengubah properti SRC dari elemen IMG ke nilai yang sama , peristiwa onload TIDAK akan diaktifkan.

Tampaknya ini dikenali di jQuery terbaru (1.4.x) - http://api.jquery.com/load-event - mengutip:

Ada kemungkinan bahwa peristiwa pemuatan tidak akan dipicu jika gambar dimuat dari cache browser. Untuk memperhitungkan kemungkinan ini, kita dapat menggunakan peristiwa beban khusus yang langsung aktif jika gambar sudah siap. event.special.load saat ini tersedia sebagai plugin.

Sekarang ada plugin untuk mengenali kasus ini dan properti "lengkap" IE untuk status pemuatan elemen IMG: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Sesuai jawaban ini , Anda dapat menggunakan acara jQuery load pada windowobjek alih-alih document:

jQuery(window).load(function() {
    console.log("page finished loading now.");
});

Ini akan dipicu setelah semua konten di halaman telah dimuat. Ini berbeda dengan jQuery(document).load(...)yang dipicu setelah DOM selesai memuat.

Plugin imagesLoaded adalah pilihan yang tepat, jika Anda membutuhkan solusi crossbrowser

 $("<img>", {src: 'image.jpg'}).imagesLoaded( function( $images, $proper, $broken ){
 if($broken.length > 0){
 //Error CallBack
 console.log('Error');
 }
 else{
 // Load CallBack
 console.log('Load');
 }
 });

Jika Anda Hanya Membutuhkan WorkAround IE, Ini Akan Dilakukan

 var img = $("<img>", {
    error: function() {console.log('error'); },
    load: function() {console.log('load');}
    });
  img.attr('src','image.jpg');

Ada catatan di plugin ahpi.imgload.js saat ini yang mengatakan bahwa plugin tersebut saat ini rusak, dan untuk mencoba inti ini sebagai gantinya: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

Untuk gambar dengan asal yang sama, Anda dapat menggunakan:

$.get('http://www.your_domain.com/image.jpg', imgLoaded);

function imgLoaded(){
    console.log(this, 'loaded');
}

mungkin plugin ini semoga bermanfaat: http://www.farinspace.com/jquery-image-preload-plugin/

  function CheckImageLoadingState()
  {
     var counter = 0;
     var length = 0;

     jQuery('#siteContent img').each(function() 
     {
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
          length++;
     });

     jQuery('#siteContent img').each(function() 
     {  
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
        {
           jQuery(this).load(function() 
           {
           }).each(function() {
              if(this.complete) jQuery(this).load();
            });
        }
        jQuery(this).load(function()
        {
           counter++;
           if(counter === length) 
           {  
              //function to call when all the images have been loaded
              DisplaySiteContent();
           }
        });
     });
  }

$( "img.photo" ).load(function() {

    $(".parrentDiv").css('height',$("img.photo").height());
    // very simple

}); 

Saya membuat skrip saya sendiri, karena saya menemukan banyak plugin menjadi sangat membengkak, dan saya hanya ingin itu berfungsi seperti yang saya inginkan. Tambang memeriksa untuk melihat apakah setiap gambar memiliki tinggi (tinggi gambar asli). Saya telah menggabungkannya dengan fungsi $ (window) .load () untuk mengatasi masalah caching.

Saya telah mengkomentarinya dengan cukup berat, jadi harus menarik untuk dilihat, bahkan jika Anda tidak menggunakannya. Ini bekerja dengan sempurna untuk saya.

Tanpa basa-basi lagi, ini dia:

imgLoad.js

Menunggu semua gambar dimuat ...
Saya menemukan jawaban untuk masalah saya dengan jfriend00 di sini jquery: bagaimana cara mendengarkan gambar yang dimuat acara dari satu div kontainer? .. dan "if (this.complete)"
Menunggu semuanya dimuat dan beberapa mungkin di cache! .. dan saya telah menambahkan acara "error" ... ini kuat di semua browser

$(function() { // Wait dom ready
    var $img = $('img'), // images collection
        totalImg = $img.length,
        waitImgDone = function() {
            totalImg--;
            if (!totalImg) {
                console.log($img.length+" image(s) chargée(s) !");
            }
        };
    $img.each(function() {
        if (this.complete) waitImgDone(); // already here..
        else $(this).load(waitImgDone).error(waitImgDone); // completed...
    });
});

Demo: http://jsfiddle.net/molokoloco/NWjDb/

window.load = function(){}

Ini sepenuhnya didukung oleh semua browser, dan itu akan mengaktifkan peristiwa ketika semua gambar dimuat sepenuhnya.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload