पूर्ण छवि लोड के बाद जावास्क्रिप्ट निष्पादन समारोह

Question

मेरे पास छवि बदलने के लिए javascritp $("#hero_image img").attr('src', src); की निम्न पंक्ति है। निम्नलिखित पंक्तियां तब भी करती हैं जो वे छवियों के आधार पर करते हैं जो नई चौड़ाई जिसे मैं $("#hero_image img").width(); के माध्यम से कॉल कर रहा था।

हालांकि, मैं कैसे सुनिश्चित करूं कि यह छवि चौड़ाई प्राप्त करने से पहले पूरी तरह से लोड हो गई है, अन्यथा मुझे पुरानी चौड़ाई के साथ वापस कर दिया जाएगा? एक टाइमआउट सेट करना पर्याप्त विश्वसनीय नहीं है।

Answer 1

आप .load() ईवेंट हैंडलर जिसके बाद यह पूरी तरह से भरी हुई है आग, इस तरह में चौड़ाई प्राप्त कर सकते हैं:

$("#hero_image img").load(function() { 
    alert($(this).width()); 
}).attr('src', src); 

यदि आप ऐसा करने और फिर से उपयोग कर छवि कर रहे हैं, या तो .load() हैंडलर एक बार बाँध , आप अलग व्यवहार की जरूरत है हर बार .one() उपयोग करती हैं इसलिए एक onload ईवेंट हैंडलर जोड़ने नहीं रखता:

$("#hero_image img").one('load', function() { 
    alert($(this).width()); 
}).attr('src', src); 

Answer 2

$(function(){ // document ready 
    $('#hero_image img').bind('load', function(){ // image ready 
     // do stuff here 
    }); 
});