छवि लोड घटनाओं के लिए बुलबुला उपलब्ध है?

Question

मैं उपयोग कर सकते हैं:

window.addEventListner(); 

किसी तरह से।

मेरी सभी छवियों में display = 'none' है।

एक बार छवि लोड हो जाए,

मैं display = 'inline'

स्थापित करने के लिए इस तरह से मैं सामान्य सकता है, जबकि चित्र डाउनलोड किया जा रहा है क्या प्रदर्शित किया जाता है चाहता हूँ।

इस मामले में, मैं अपनी छवियों को प्री-लोड नहीं कर सकता।

Answer 1

load/onload ईवेंट बबल (reference, reference) नहीं है, तो क्या आप के लिए पूछ रहे हैं संभव नहीं है। आपको प्रत्येक इमेज नोड में इवेंट हैंडलर संलग्न करना होगा।

Answer 2

$('img').on('load', function() { 
    $(this).show() 
}) 

---

पुस्तकालयों के बिना:

window.onload = function() { 
    var imgs = document.querySelectorAll('img') 
    imgs.onload = function() { 
     this.style.display = 'inline'; 
    } 
} 

Answer 3

आप Image.onload ईवेंट हैंडलर का उपयोग कर सकते लेकिन कोई उत्साह से भरा हुआ शामिल है। यदि छवि संयोग से पहले से ही भरी हुई है

var i = new Image; 
i.onload = function() { 
    this.style.display = 'block'; 
} 

Answer 4

Array.prototype.forEach.call(document.querySelectorAll('img'), function (elem) { 
    elem.addEventListener('load', function() { 
     this.style.display = 'inline'; 
    }); 
    if (elem.complete) { 
     elem.style.display = 'inline'; 
    } 
}); 

"लोड" घटना ट्रिगर नहीं करेगा; इस प्रकार, हम जांचते हैं कि complete पहले से सेट है या नहीं।

Answer 5

उपयोग कुछ डोम window (body या ब्याज की छवि तत्वों के दूसरे माता पिता) के अलावा अन्य नोड पर घटना श्रोता पर कब्जा:

document.body.addEventListener(
    'load', 
    function(event){ 
     var tgt = event.target; 
     if(tgt.tagName == 'IMG'){ 
      tgt.style.display = 'inline'; 
     } 
    }, 
    true // <-- useCapture 
) 

इस के साथ

आप (फिर) की जरूरत नहीं है देते हैं इवेंट हैंडलर document.images के माध्यम से पुनरावृत्त करते हैं।

और यह गतिशील रूप से सम्मिलित छवियों के लिए भी काम करेगा।

Same is true for image's error loading events. MDN: addEventListener