JQuery - छवि लोड होने पर जांचें?

Question

जब कोई छवि लोड हो गई है तो मुझे कुछ परेशानी हो रही है।

मुझे बताया गया है कि निम्न कार्य काम करेगा लेकिन यह कुछ भी नहीं कर रहा है।

$("#photos img:first").load(function(){ 
    alert("Image loaded!"); 
}); 

मेरे कोड में कोई त्रुटि नहीं है। मेरी लिपि में सबकुछ बढ़िया काम करता है।

मेरा HTML इस तरह दिखता है।

<div id="photos"> 
    <img src="../sample1.jpg" style="background-color:#000033" width="1" height="1" alt="Frog!"/> 
    <img src="../sample2.jpg" style="background-color:#999999" width="1" height="1" alt="Zooey!"/> 
</div> 

क्या मेरे पास गलत JQuery फ़ंक्शन है? यह भी ध्यान दिया जाना चाहिए कि दृश्यता छिपी हुई है। हालांकि जब भी दिखाई देता है वहां कोई चेतावनी नहीं होती है।

कोई विचार?

Answer 1

जब यह भरा हुआ है एक छवि के load घटना निकाल दिया जाता है (doh!), और गंभीर रूप से अगर आप अपने हैंडलर सेट अप हुक नहीं है:

Answer 2

load ईवेंट के बजाय ready का उपयोग करें। ,

$("#images img:last").one("load",function(){ 
     //do something  
} 

या

$("#images img:last").one("ready",function(){ 
     //do something  
} 

Answer 3

कोशिश इस इससे पहले लोड हो जाता है, आपका हैंडलर नहीं बुलाया जाएगा। ब्राउज़र समानांतर में संसाधन लोड करेंगे, इसलिए आप सुनिश्चित नहीं हो सकते हैं (यहां तक ​​कि jQuery के ready ईवेंट में भी कहा गया है कि पृष्ठ का डोम तैयार है) कि आपका कोड चलने पर छवि पहले ही लोड नहीं हुई है। ,

var firstPhoto = $("#photos img:first"); 
if (firstPhoto[0].complete) { 
    // Already loaded, call the handler directly 
    handler(); 
} 
else { 
    // Not loaded yet, register the handler 
    firstPhoto.load(handler); 
} 
function handler() { 
    alert("Image loaded!"); 
} 

भी है कि में एक रेस स्थिति हो सकता है अगर सवाल में ब्राउज़र वास्तव में बहु लागू करता है:

आप जानते हैं कि क्या यह पहले ही लोड हो रहा है छवि वस्तु की complete संपत्ति का उपयोग कर सकते तो थ्रेड लोडिंग जहां जावास्क्रिप्ट थ्रेड की तुलना में एक अलग थ्रेड पर छवि लोड हो सकता है।

बेशक, यदि आपका चयनकर्ता एकाधिक छवियों से मेल खाता है, तो आपको इसे संभालना होगा; अपने चयनकर्ता की तरह यह केवल एक मैच के लिए चाहिए था लगता है, इसलिए ...

संपादित इस संस्करण में कई छवियों के लिए अनुमति देता है, और मैं वहाँ लगता है यह किसी भी गैर जावास्क्रिप्ट दौड़ की स्थिति और संभालती है (बेशक, वर्तमान में कोई जावास्क्रिप्ट दौड़ की स्थिति हैं, स्वयं Javascript ब्राउज़रों में एकल पिरोया है) [जब तक आप नए web workers सामग्री का प्रयोग]:

function onImageReady(selector, handler) { 
    var list; 

    // If given a string, use it as a selector; else use what we're given 
    list = typeof selector === 'string' ? $(selector) : selector; 

    // Hook up each image individually 
    list.each(function(index, element) { 
     if (element.complete) { 
      // Already loaded, fire the handler (asynchronously) 
      setTimeout(function() { 
       fireHandler.call(element); 
      }, 0); // Won't really be 0, but close 
     } 
     else { 
      // Hook up the handler 
      $(element).bind('load', fireHandler); 
     } 
    }); 

    function fireHandler(event) { 
     // Unbind us if we were bound 
     $(this).unbind('load', fireHandler); 

     // Call the handler 
     handler.call(this); 
    } 
} 

// Usage: 
onImageReady("#photos img:first"); 

कुछ नोट:

• कॉलबैक event ऑब्जेक्ट नहीं मिलता है; यदि आप पसंद करते हैं तो आप ऐसा करने के लिए इसे संशोधित कर सकते हैं, लेकिन निश्चित रूप से, उस मामले में कोई ईवेंट नहीं होगा जहां छवि पहले ही लोड हो चुकी है, इसलिए यह सीमित उपयोगिता होगी।
• आप bind और unbind के बजाय शायद one का उपयोग कर सकते हैं, लेकिन मुझे स्पष्टता पसंद है और मैं पागल हूं।:-)

Answer 4

$("#images img:last").on('load',function(){ 
    //do smth 
});