एचटीएमएल में छवियों को प्रीलोड करना, क्या एक और आधुनिक तरीका है?

Question

मेरे पास माउस ईवेंट पर जेएस द्वारा लोड की गई एक छवि है। यह एक काफी बड़ी छवि है इसलिए मैं यह सुनिश्चित करना चाहता हूं कि यह पहले से लोड हो जाए। मैं साल पहले से कुछ पुराने तकनीक reemmber और this example पाया:

<SCRIPT LANGUAGE = JAVASCRIPT> 
if (document.images) 
{ 
    img1 = new Image(); 
    img2 = new Image(); 
    img1.src = "imageName1.gif"; 
    img2.src = "imageName2.gif" 
} 
</SCRIPT> 

मैंने सोचा कि अगर यह अभी भी स्वचालित रूप से अप्रयुक्त छवियों का पता लगाने और फिर भी उन्हें प्रीलोड ब्राउज़रों अच्छा/प्रासंगिक है, या हो सकता है? ध्यान दें कि मेरे पृष्ठ को आईई 6 का समर्थन करना है, इसलिए मुझे अभी भी पुरानी तकनीक की आवश्यकता हो सकती है, लेकिन मुझे अभी भी दिलचस्पी है यदि अधिक आधुनिक ब्राउज़र के पास बेहतर तरीका है?

Answer 1

नहीं, यह है। ऐसा कुछ क्यों बदलता है जो काम करता है?

लेकिन एक और अधिक उचित उपयोग इस

(function() { 
    var img1 = new Image(); 
    var img2 = new Image(); 
    img1.src = "imageName1.gif"; 
    img2.src = "imageName2.gif" 
})(); 

या सिर्फ

new Image().src = "imageName1.gif"; 
new Image().src = "imageName2.gif" 

इन टाल चर के साथ वैश्विक क्षेत्र को अव्यवस्थित दोनों की तरह है।

और language="JavaScript" बहिष्कृत है। type="text/javascript" का प्रयोग करें।

Answer 2

निर्भर करता है कि आप किस प्रकार की छवियों के बारे में बात कर रहे हैं, आइकन/बटन इत्यादि सीएसएस स्प्राइट्स नामक तकनीक का उपयोग करके किया जा सकता है।

http://www.alistapart.com/articles/sprites

Answer 3

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

var img1 = document.createElement('img'); 
var img2 = document.createElement('img'); 
img1.setAttribute('src','imageName1.gif'); 
img2.setAttribute('src','imageName2.gif'); 

... और फिर बाद में, जब आप जानते हैं छवियों सम्मिलित करने के लिए तैयार कर रहे हैं ...

document.getElementById('imagePlaceholder1').appendChild(img1); 
document.getElementById('imagePlaceholder2').appendChild(img2); 

इस में 'प्री-लोडेड' फाइल हो रही है में परिणाम है मैंने जिन आधुनिक ब्राउज़रों का परीक्षण किया है और यह वास्तव में आपकी कोडिंग शैलियों के साथ अधिक संगत हो सकता है, लेकिन मुझे अभी भी चिंता है कि कुछ ब्राउज़र तत्व निर्माण के समय छवि लोड नहीं कर सकते हैं, लेकिन दस्तावेज़ निकाय में जोड़े जाने तक प्रतीक्षा करें। इसलिए मैंने आपके द्वारा उल्लिखित सटीक समाधान का उपयोग करने का विकल्प चुना। ईसीएमएस्क्रिप्ट के अगले अपडेट तक कम से कम, "पुराना कोड" (कम से कम पुराना कोड जैसे नई छवि()) में कुछ भी गलत नहीं है। यह काम करता है और इसका उद्देश्य इस तरह से काम करना था। मुझे नहीं लगता कि यह विशेष रूप से हैकी है।

[संपादित करें] जब आप सुनिश्चित हैं कि छवियों को लोड किया गया है और/या जब उपयोगकर्ता ऐसा करता है तो आप निष्पादित करने के लिए कोड का दूसरा ब्लॉक निष्पादित किया जाना चाहिए, जिससे आप उसकी उपस्थिति को ट्रिगर करते हैं।