केवल होवर पर उपयोग की जाने वाली छवियों को पूर्व-लोड कैसे करें?

Question

मेरे पास एक लिंक है जो एक पृष्ठभूमि छवि से शुरू होता है और फिर होवर पर दूसरे में बदल जाता है। दोनों पृष्ठभूमि चित्र CSS में सेट हैं। मेरे ब्राउज़र (उनमें से कोई भी) होवर छवि को लोड करने के लिए प्रतीत नहीं होता है जब तक आप वास्तव में होवर नहीं करते हैं। लेकिन फिर आप कई सेकंड के लिए एक रिक्त छवि के साथ समाप्त होते हैं (मेरे बहुत धीमे कनेक्शन पर) यह नया लोड करने के लिए लेता है। क्या होवर छवि को पूर्व-लोड करने के लिए ब्राउज़र को प्रोत्साहित करने का एक तरीका है ताकि होवर पर विलंब समय न हो?

Answer 1

1) सीएसएस स्प्राइट्स का उपयोग करें (यह पसंदीदा तरीका है)।

2) एक छिपे हुए div में छवियों को लोड करें। छवियों को div में रखें और फिर display: none;इसे छिपाने के लिए div का CSS सेट करें ।

3) सीएसएस के साथ छवियों को लोड करें :

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) इस जावास्क्रिप्ट का उपयोग करें

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>

Comments

क्या पेज लोड होने के बाद उन्हें लोड करने का कोई तरीका है? तो उपयोगकर्ता कर्सर पर एक लोडिंग सर्कल नहीं देखता है? एक तरह से एक छिपा हुआ फ्रेम होगा जिसमें छिपी फ्रेम को प्रदर्शित करने में देरी करने के लिए जावास्क्रिप्ट का उपयोग किया जाता है, जैसे कि मेरे प्रश्न में stackoverflow.com/questions/13437091/ ... लेकिन उस कर्सर पर लोडिंग सर्कल को प्रदर्शित करने में देरी और प्रदर्शित नहीं करने के लिए एक पसंदीदा तरीका है ?

— 15

कोई बात नहीं, मैं इस पाया perishablepress.com/3-ways-preload-images-css-javascript-ajax और यह समय देरी से दोषरहित काम करता है।

— रिसियागैनस्ट

Answer 2

मुझे वास्तव में जावास्क्रिप्ट समाधान पसंद नहीं है - यह गड़बड़ है, इसे बनाए रखना मुश्किल है, और निश्चित रूप से पूरी तरह से विफल रहता है जब जेएस अक्षम है।

आधुनिक समाधान सीएसएस स्प्राइट्स का उपयोग करना है - यह कोशिश करो, मेरा विश्वास करो, आपको आश्चर्य होगा कि आपने ऐसा पहले कभी क्यों नहीं किया;)

Answer 3

मुझे यह लिंक शुद्ध सीएसएस का उपयोग करके छवियों को पूर्व-लोड करने के तरीके पर मिला:

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

और यह मेरे लिए तब काम आया जब मुझे होवर पर अलग-अलग बैकग्राउंड इमेज बदलने की जरूरत पड़ी।

Answer 4

इसे अपने सीएसएस के ऊपर जोड़ें:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

यदि आप स्प्राइट मार्ग पर जाते हैं तो danp आपको सुझाव देता है कि आपको अभी भी स्प्राइट को लोड करने से पहले समस्या है। उसने कहा मुझे प्यार है; आसानी से उन्हें बनाने के लिए मैं स्टीव सॉडर्स से स्प्रिटेम टूल का उपयोग करता हूं :