डोम में सभी छवियों के बाद jquery कॉलबैक लोड हो रहे हैं?

Question

डीओएम में सभी छवियों को लोड होने पर मैं एक ईवेंट कैसे फायर कर सकता हूं? मैंने बहुत कुछ किया है। मैं इस पाया है, लेकिन यह काम करने के लिए प्रतीत नहीं होता:

jQuery event for images loaded

Answer 1

window के खिलाफ load()^(docs) विधि का उपयोग करें।

$(window).load(function() { 
    // this will fire after the entire page is loaded, including images 
}); 

या बस window.onload के माध्यम से सीधे करते हैं।

window.onload = function() { 
    // this will fire after the entire page is loaded, including images 
}; 

---

तो आपको एक अलग घटना प्रत्येक छवि के लिए सक्रिय करना चाहते हैं, प्रत्येक छवि पर एक .load() जगह।

$(function() { 
    $('img').one('load',function() { 
     // fire when image loads 
    }); 
}); 

या इस बात की संभावना एक छवि कैश की जा सकती है कि अगर, ऐसा करते हैं:

$(function() { 
    function imageLoaded() { 
     // function to invoke for loaded image 
    } 
    $('img').each(function() { 
     if(this.complete) { 
      imageLoaded.call(this); 
     } else { 
      $(this).one('load', imageLoaded); 
     } 
    }); 
}); 

---

संपादित करें:

आदेश अंतिम छवि लोड करने के बाद कुछ क्रिया निष्पादित करने के , छवियों की कुल संख्या पर एक काउंटर सेट का उपयोग करें, और प्रत्येक बार जब लोड हैंडलर कहा जाता है तो कमी।

जब यह 0 तक पहुंचता है, तो कुछ अन्य कोड चलाएं।

$(function() { 
    function imageLoaded() { 
     // function to invoke for loaded image 
     // decrement the counter 
     counter--; 
     if(counter === 0) { 
      // counter is 0 which means the last 
      // one loaded, so do something else 
     } 
    } 
    var images = $('img'); 
    var counter = images.length; // initialize the counter 

    images.each(function() { 
     if(this.complete) { 
      imageLoaded.call(this); 
     } else { 
      $(this).one('load', imageLoaded); 
     } 
    }); 
}); 

Answer 2

एक मुद्दा मैं में भाग साथ user113716 के संपादित समाधान है कि एक टूटी हुई छवि कभी 0. तक पहुंच गया यह मेरे लिए यह तय से काउंटर रखेंगे।

.error(function(){ 
    imageLoaded(); 
    $(this).hide(); 
}); 

Answer 3

नीचे क्या मैं के साथ आया था, टाल वस्तुओं और $.when के बजाय का उपयोग कर एक काउंटर का उपयोग कर रहा है।

var deferreds = []; 
$('img').each(function() { 
    if (!this.complete) { 
     var deferred = $.Deferred(); 
     $(this).one('load', deferred.resolve); 
     deferreds.push(deferred); 
    } 
}); 
$.when.apply($, deferreds).done(function() { 
    /* things to do when all images loaded */ 
}); 

मुझे पता है कि क्या कोई प्रतिवाद में है।