acara jQuery untuk gambar yang dimuat


96

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.


9
Mengapa Anda tidak menggunakan event onload: $ (window) .load (doStuff)? Namun, onload akan menunggu sumber daya lain juga (misalnya skrip, stylesheet & flash) dan bukan hanya gambar, yang mungkin tidak masalah bagi Anda.
moff

Melampirkan acara pemuatan ke semua tag img Anda, seperti yang Anda miliki di contoh kode Anda, harus berfungsi. Jika gambar gagal dimuat, doStuff () tidak akan dipanggil, tetapi tampaknya masuk akal mengingat persyaratan Anda bahwa semua gambar harus dimuat.
Steve Goodman

2
Metode .load () sudah tidak digunakan lagi sejak jQuery 1.8. Lihat ini: stackoverflow.com/questions/3877027/…
fiorix

Jawaban:


116

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


4
Inilah jawabannya- menangani banyak gambar, gambar cache, kebiasaan browser, gambar rusak, dan sekarang. Cantik.
Yarin

7
mengujinya hari ini. aktif dan berjalan dalam 2 menit.
CodeToad

Setuju dengan @Yarin, dokumentasi bagus, mudah digunakan, banyak, cache, rusak, dan terkini. Suka.
johntrepreneur

Sisi negatifnya, bagaimanapun, imagesLoaded tidak mendukung IE7 jika itu penting bagi Anda.
johntrepreneur

1
Perbaikan 2 baris yang cepat dan sederhana untuk membuat imagesLoaded berfungsi di IE7 .
johntrepreneur

63

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

70
Hati-hati, karena load()tidak akan terpicu saat gambar sudah dimuat. Ini bisa terjadi dengan mudah saat gambar ada di cache browser pengguna. Anda dapat memeriksa apakah gambar sudah dimuat menggunakan $('#myImage').prop('complete'), yang mengembalikan nilai true saat gambar dimuat.
Blaise

6
Mengapa ini memiliki begitu banyak suara ketika a) tidak menjawab pertanyaannya dan b) memberikan solusi yang buruk juga? (Berarti jawaban yang benar adalah @ johnpolacek dan memiliki 1 suara)
Yarin

5
PERINGATAN!!!!!!!!!!!!!!! Ini bukan jawaban yang benar. johnpolacek punya jawaban yang benar. Tolong pilih jawabannya.
mrbinky3000

4
Keberatan ini tampaknya tidak relevan lagi kecuali dalam keadaan yang sangat spesifik: Webkit saat Anda mengubah src gambar menjadi src yang sama persis seperti sebelumnya. Untuk gambar yang baru saja Anda tambahkan ke DOM, $ (...). Load () sudah cukup. Diuji di FF dan Chrome saat ini, dan IE6-9: jsfiddle.net/b9chris/tXVCe/2
Chris Moschini

1
+1 Bekerja dengan baik bila (Anda tahu bahwa) gambar tidak ada dalam cache browser.
Lode

28

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.


Hai Alex, terlihat menjanjikan. Tetapi seperti yang disebutkan dalam jawaban dan komentar yang diberikan oleh johnpolacek dan hirisov, apakah itu mencakup kasus ketika gambar sudah ada di cache browser?
SexyBeast

Saya memiliki proses yang membuat gambar dan memuatnya secara dinamis setelah halaman telah dimuat, dan saya perlu menampilkan ajax loader saat pengguna menunggu. Plugin ini berfungsi dengan sempurna untuk kasus penggunaan itu. Anda harus memanggil fungsi tersebut setelah menyetel properti img src!
John Livermore

20

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


16

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.


Inilah yang saya cari!
Eric K

4

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');


2

Untuk gambar dengan asal yang sama, Anda dapat menggunakan:

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

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


0
  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();
           }
        });
     });
  }

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

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

}); 

0

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


0

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/


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.