जावास्क्रिप्ट/Jquery (एनीमेशन के साथ) में एक छवि preload करने के लिए यह एक सही तरीका है?

मैं एचटीएमएल में एक छवि लोड करते समय एक बुनियादी एनीमेशन प्रदर्शित करने की कोशिश कर रहा हूं।

क्या यह करने का सही तरीका है?

      //display the (small image) animation
      var preloader = new Image();
      preloader.src = 'img/preload.gif';
      $('#myDiv').append(preloader);

      //load big image and hide peload animation when finished
      var img = new Image();
      img.onload = function() { $(preloader).hide(); preloader = null; } ;
      img.src = 'img/bigImage.jpg';
      $('#myDiv').append(img);

मुझे यकीन नहीं है कि यह सही है: हालांकि यह मेरे ब्राउज़र में काम करता है, छोटी एनीमेशन हमेशा लोड होती है, भले ही बड़ी छवि पहले ही लोड हो चुकी है और कैश में है। क्या एक छोटी एनीमेशन वाली छवि के प्रीलोड को संभालने के लिए इसे सक्रिय करने, या सोचने या किसी अन्य तरीके से सक्रिय करने का कोई तरीका है?

धन्यवाद

0
आप 100 एमएमएस टाइमआउट शुरू कर सकते हैं और फिर जांच सकते हैं कि छवि लोड हो गई है या नहीं।
जोड़ा लेखक vorrtex, स्रोत

1 उत्तर

यहां बताया गया है कि मैं इसे कैसे करूंगा:

var preloader = new Image(),
    img       = new Image(),
    div       = document.getElementById('myDiv');

img.onload = function() {
    preloader = null; 
    div.innerHTML = '';
    div.appendChild(this);
};

img.src = 'img/bigImage.jpg';

// if it's not in cache or not loaded (has no size), show the preloader
if (! (img.complete || img.width+img.height > 0) ) {
    preloader.src = 'img/preload.gif';
    div.innerHTML = '';
    div.appendChild(preloader);
}
0
जोड़ा
वाकई बहूत बढिया! धन्यवाद
जोड़ा लेखक carmellose, स्रोत
मैं बस यह ध्यान रखना चाहूंगा कि इसके बारे में कुछ अच्छा यह है कि ब्राउज़र को छवि संसाधन की कैश की स्थिति की जांच करने का कारण नहीं होता है जब आप इसे कहकर करेंगे, src किसी अन्य URL पर img की विशेषता। जैसे <�कोड> var i = नई छवि (); i.src = 'http://path.to/img.jpg' । जिसने मुझे मदद की क्योंकि मैंने उस समाधान के लिए खोज की थी।
जोड़ा लेखक dougBTV, स्रोत