Yüklenen görüntüler için jQuery olayı

Tüm görüntülerin bir jQuery olayı aracılığıyla yüklendiğini tespit etmek mümkün müdür?

İdeal olarak, bir

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

veya

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

Ama ben böyle bir şey bulamıyorum.

Bunun gibi bir olay eklemeyi düşündüm:

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

Ancak bir görüntü yüklenemezse bu kırılır mı? Yöntemin doğru zamanda çağrılması kritik derecede önemlidir.

JQuery'nin belgelerine göre , load olayını görüntülerle kullanmak için bir dizi uyarı vardır. Başka bir yanıtta belirtildiği gibi, ahpi.imgload.js eklentisi bozuk, ancak bağlantılı Paul Irish özü artık korunmuyor.

Paul Irish'e göre, görüntü yükleme tamamlanma olaylarını tespit etmek için kanonik eklenti şu anda:

https://github.com/desandro/imagesloaded

Tüm resimleri değil, belirli birini (ör. DOM zaten tamamlandıktan sonra dinamik olarak değiştirdiğiniz bir resim) kontrol etmek istiyorsanız, şunu kullanabilirsiniz:

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

Benim eklentisi kullanabilirsiniz waitForImages bu işlemek için ...

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

Bunun avantajı, onu bir üst öğeye yerelleştirebilmeniz ve isteğe bağlı olarak CSS'de referans verilen görüntüleri algılayabilmesidir.

Bu buzdağının sadece görünen kısmı, daha fazla işlevsellik için belgelere bakın.

JQuery $ (). Load () öğesinin bir IMG olay işleyicisi olarak kullanılması garanti edilmez. Görüntü önbellekten yüklenirse, bazı tarayıcılar olayı tetiklemeyebilir. Safari'nin (daha eski?) Sürümleri söz konusu olduğunda, bir IMG öğesinin SRC özelliğini aynı değere değiştirdiyseniz , onload olayı tetiklenmeyecektir.

Bunun en son jQuery'de (1.4.x) - http://api.jquery.com/load-event - alıntı yapmak için tanındığı görülüyor :

Görüntü tarayıcı önbelleğinden yüklenirse yükleme olayının tetiklenmemesi mümkündür. Bu olasılığı hesaba katmak için, görüntü hazır olduğunda hemen tetiklenen özel bir yükleme olayı kullanabiliriz. event.special.load şu anda bir eklenti olarak mevcuttur.

Artık bu durumu ve IE'nin IMG öğesi yükleme durumları için "eksiksiz" özelliğini tanıyan bir eklenti var: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Gereğince bu cevap , kullanabileceğiniz jQuery yük olay üzerine windowyerine nesne document:

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

Bu, sayfadaki tüm içerik yüklendikten sonra tetiklenecektir. Bu jQuery(document).load(...), DOM yüklemeyi bitirdikten sonra tetiklenenden farklıdır .

imagesLoaded Plugin, çapraz tarayıcı çözümüne ihtiyacınız varsa gitmenin yoludur

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

Yalnızca Bir IE WorkAround'a İhtiyacınız Varsa, Bu İşe Yarar

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

Şu anda ahpi.imgload.js eklentisinde şu anda bozuk olduğunu belirten bir not var ve bunun yerine şu ana fikri deneyin: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

Aynı kökenli görseller için şunları kullanabilirsiniz:

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

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

belki bu eklenti yararlı olabilir: 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

}); 

Kendi betiğimi yarattım, çünkü çok fazla eklenti buldum ve sadece istediğim gibi çalışmasını istedim. Benimki, her görüntünün bir yüksekliği olup olmadığını (yerel görüntü yüksekliği) kontrol eder. Önbelleğe alma sorunlarını çözmek için bunu $ (window) .load () işleviyle birleştirdim.

Kodum oldukça yoğun bir şekilde yorumlandı, bu yüzden kullanmasanız bile bakmak ilginç olmalı. Benim için mükemmel çalışıyor.

Daha fazla uzatmadan, işte burada:

imgLoad.js komut dosyası

Tüm resimlerin yüklenmesini bekliyorum ...
jfriend00 ile ilgili sorunumun cevabını burada buldum jquery: bir konteyner div'in imaj yüklenme olayını nasıl dinleyebilirim? .. ve "if (this.complete)"
Her şeyin yüklenmesi ve bazılarının muhtemelen önbellekte olmasını bekliyorum! .. ve "error" olayını ekledim ... tüm tarayıcılarda sağlam

$(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(){}

Tüm tarayıcılar tarafından tam olarak desteklenir ve tüm görüntüler tamamen yüklendiğinde bir olay tetikler.

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