async या सिंक? जब हम छवि ऑब्जेक्ट की src property सेट करते हैं?

Question

var img=new Image(); 
img.src='xxxxx'; 

क्या ब्राउज़र छवि लोड करने के लिए प्रतीक्षा करेगा और फिर अगली कोड लाइन निष्पादित करेगा?

Answer 1

वह क्रिया असीमित है; बहुत सारी छवि 'प्री-लोडिंग' कोड उस सुविधा पर निर्भर करती है।

संपादित करें: थोड़ी अधिक उपयोगी जानकारी भी प्रदान करें।)

var img = new Image(); 
img.onload = function() { /* onLoad code here */ }; 
img.src = 'xxxxxx'; 

Answer 2

वर img = नई छवि (;: आप छवियों जावास्क्रिप्ट की छवि वस्तु के माध्यम से लोड करने के लिए कुछ कार्रवाई तुल्यकालिक इंतजार है के लिए इच्छुक है, तो आप ऑनलोड घटना है, इसलिए की तरह उपयोग कर सकते हैं

छवियों को बनाने का यह पुराना तरीका है, जिसे बहिष्कृत किया गया है। document.createElement('IMG') पसंद करें या स्ट्रिंग्स और आंतरिक HTML के माध्यम से एक बनाएं।

अब, छवियां replaced elements हैं, जिसका अर्थ यह है कि जब भी वे पहुंचते हैं तो वे लोड होते हैं, लेकिन उनके आयाम निर्दिष्ट किए जाने पर स्थान लेआउट प्रवाह में उनके लिए आरक्षित है। (यदि नहीं, तो आइकन-आकार की जगह आरक्षित होती है और जब स्क्रीन हेडर में इसके आयामों के साथ आता है तो स्क्रीन को फिर से खींचा जाता है; यह एक विघटनकारी उपयोगकर्ता अनुभव हो सकता है, इसलिए आपको पेज आयाम के दौरान छवि आयाम तैयार करने के लिए प्रोत्साहित किया जाता है पहली बार।)

Answer 3

@ डीरेलेज्ड छवि प्री-लोडिंग के साथ सहमति असीमित रूप से की जाती है; बस सोचा कि मैं जोड़ूंगा कि इस तकनीक का उपयोग जावास्क्रिप्ट में छवि() ऑब्जेक्ट पर करने के कई तरीके हैं, जैसे सरणी या ईवेंट हैंडलर का उपयोग करना।

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 4

बदलने src अतुल्यकालिक है।

कोड

image.src = "http://newimage-url";

तुरंत वापस आ जाएगी और ब्राउज़र एक और धागा में नई छवि लोड होगा। पूरी तरह से लोड होने से पहले, <img> टैग की सभी विशेषताएं सही नहीं होंगी, जैसे कि चौड़ाई या ऊंचाई।

तो $(image).width() नई छवि की चौड़ाई वापस नहीं कर सकता है।

@Dereleased के रूप में इंगित किया गया है, आप 'लोड पर' विधि को कार्यान्वित कर सकते हैं, छवि लोड होने के बाद ही कौन सा कोड निष्पादित किया जाएगा। jQuery का load() इसे आसानी से पूरा कर सकता है।