JQuery में कोई छवि लोड या कैश की गई है या नहीं?

Question

लगता है कि छवि को कैश किया गया है तो .load() फ़ंक्शन आग नहीं लगाता है।

$(img_to_load_first) 
    .load(
     $(img_to_load_last) 
      .src("2nd.png"); 
    ) 
    .src("1st.png"); 

तो कैसे एक JQuery में सुनिश्चित करता है लोड हो रहा है आदेश: आप की तरह कुछ नहीं कर सकता क्या आप वाकई इससे पहले कि आप लोड और एक अन्य (अर्थात आवर्धक) दिखाने के एक छवियों के लोड होते ही बनाना चाहते तो अगर?

Answer 1

आपको क्या करना होगा अपने लोड बाइंडिंग को चुनिंदा रूप से संभालना है। आप छवि ऑब्जेक्ट प्रॉपर्टी complete का परीक्षण करके लोड सत्यापित कर सकते हैं।

उदाहरण के लिए:

$('.load_selector').each(function(){ 

    if (!this.complete) { 
     $(this).load(function(){ 
      // handle image load event binding here 
     }); 
    } else { 
     // handle image already loaded case 
    } 

}); 

ध्यान दें कि ऊपर, this (अकेले इस्तेमाल किया) jQuery द्वारा प्रदान की छवि वस्तु को डोम संदर्भ को दर्शाता है।

Answer 2

धन्यवाद Sparkey,

मुझे लगता है कि एक कोशिश दे देंगे, लेकिन यह अच्छा लग रहा है। जो मुझे "jQuery 'onImagesLoad' प्लगइन" यहाँ करने के लिए नेतृत्व http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm

:: मैं विषय यहाँ पर एक व्यापक चर्चा पाया http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1/documentation/

जो लगता है तो तरह इस मुद्दे को हल करने के लिए:

$imgs.each(function(i, val){ 
    $(this).bind('load', function(){ 
     // ... 
    }).each(function(){ 
     if (this.complete || this.complete === undefined){ this.src = this.src; } //needed for potential cached images 
    }); 
}); 

जो कुछ आपने कहा, उससे बहुत अधिक उबाल जाता है, केवल उसकी पूर्ण जांच भी "अपरिभाषित" के लिए परीक्षण करती है।

Answer 3

आप एक jQuery विस्तार विधि में यह सब कार्यक्षमता रैप करने के लिए चाहते हैं, यह (जो छवियों के किसी भी संख्या के लिए इंतज़ार कर काम करना चाहिए) की कोशिश:

$(img_to_load_first).imagesLoaded().done(function() { 
    $(img_to_load_last).src("2nd.png"); 
}); 

:

$.fn.imagesLoaded = function() { 
    var def = $.Deferred(); 
    var count = this.length; 
    this.each(function() { 
     if (this.complete) { 
      if (!--count) { 
       def.resolve(); 
      } 
     } else { 
      $(this).load(function() { 
       if (!--count) { 
        def.resolve(); 
       } 
      }); 
     } 
    }); 
    return def.promise(); 
} 

और फिर बस इस तरह का उपयोग करें

Answer 4

आप यह भी जांच सकते हैं कि आपकी छवि की चौड़ाई या ऊंचाई है या नहीं, यह पता लगाने के लिए कि क्या यह पहले ही लोड हो चुका है या नहीं।

var img = _content.find('img'); 
    if(img[0].width >0 || img[0].height > 0) { 
    console.log('already loaded image'); 
    } else { 
    img.on('load', function() { 
    console.log('image loaded'); 
    }); 
}