2010-08-21 40 views
53

क्या jQuery को jQuery के साथ लोड होने के बाद यह पता लगाना संभव है? इसके लिए सुनने के लिएछवि लोड का पता लगाएं

$("#myImg").load(function() { 
    alert('I loaded!'); 
}).attr('src', 'myImage.jpg'); 

स्रोत की स्थापना पहले यह संलग्न करने के लिए सुनिश्चित करें, या गतिविधि सक्रिय हो सकता है इससे पहले कि आप कोई हैंडलर संलग्न (:

उत्तर

105

आप इस तरह, .load() ईवेंट हैंडलर का उपयोग कर सकते उदाहरण के लिए कैश से लोडिंग)।

अगर ऐसा है नहीं साध्य (बंधन के बाद src की स्थापना), अगर यह भरी हुई है की जाँच करें और यह आग अपने आप को, इस तरह के लिए सुनिश्चित हो:

$("#myImg").load(function() { 
    alert('I loaded!'); 
}).each(function() { 
    if(this.complete) $(this).load(); 
}); 
+0

यह संभव यह करने के लिए है:: तो हम दोनों का एक संयोजन कर '$ (" # myImg ") को लाइव (" लोड ", function() {// नृत्य}); दुर्भाग्य से' " –

+4

। , '.load() 'को jQuery v1.8 – SquareCat

+26

@ कमांडर चेकोव के रूप में बहिष्कृत किया गया है, इसे इवेंट हैंडलर और AJAX सामग्री फ़ेचर के बीच अस्पष्टता के कारण बहिष्कृत किया गया था। उपर्युक्त कोड में केवल' .load (' '.on (1.7+ –

18

यह सादा जावास्क्रिप्ट का उपयोग करने के बस के रूप में सरल है:

// Create new image 
var img = new Image(); 

    // Create var for image source 
var imageSrc = "http://example.com/blah.jpg"; 

    // define what happens once the image is loaded. 
img.onload = function() { 
    // Stuff to do after image load (jQuery and all that) 
    // Within here you can make use of src=imageSrc, 
    // knowing that it's been loaded. 
}; 

    // Attach the source last. 
    // The onload function will now trigger once it's loaded. 
img.src = imageSrc; 
+2

यह कैश में पहले से मौजूद छवियों की जांच करते समय विफल रहता है। – vsync

4

मैं भी लंबे समय के लिए इस पर शोध किया गया है, और इस के साथ शानदार मदद करने के लिए इस प्लगइन पाया है: https://github.com/desandro/imagesloaded

+०१२३५१६४१०६१

यह एक बहुत ही भयानक कोड की तरह लगता है, लेकिन ... मुझे छवि लोड होने पर जांचने का कोई और तरीका नहीं मिला।

4

jQuery ('लोड') फ़ंक्शन पर jQuery का उपयोग करना यह जांचने का सही तरीका है कि छवि लोड हो गई है या नहीं। लेकिन ध्यान रखें कि अगर छवि पहले से ही कैश में है तो चालू ('लोड') फ़ंक्शन काम नहीं करेगा।

var myImage = $('#image_id'); 
//check if the image is already on cache 
if(myImage.prop('complete')){ 
    //codes here 
}else{ 
    /* Call the codes/function after the image is loaded */ 
    myImage.on('load',function(){ 
      //codes here 
    }); 
} 
0

मुझे लगता है यह आपको कुछ ही देर में मदद कर सकते हैं:

$('img').error(function(){ 
     $(this).attr(src : 'no_img.png'); 
}) 

तो, अगर यह लोड - मूल छवि में दिखाया जाएगा। दूसरे में - छवि दिखाया जाएगा, जिसमें क्रैश छवि या 404 HTTP शीर्षलेख के साथ तथ्य शामिल है।

1

यह jQuery के साथ आसान है:

$('img').load(function(){ 
    //do something 
}); 

तो इसके साथ करने की कोशिश की:

$('tag')html().promise().done(function(){ 
    //do something 
}) ; 

लेकिन अगर चित्र लोड है कि जांच नहीं करेगा। अगर कोड लोड होता है तो वह आग लगती है। अन्यथा आप जांच सकते हैं कि कोड कब किया गया था, फिर आईएमजी लोड फ़ंक्शन को आग लगाएं और जांचें कि तस्वीर वास्तव में लोड हो गई है या नहीं।

$('tag')html('<img src="'+pic+'" />').promise().done(function(){ 
    $('img').load(function(){ 
    //do something like show fadein etc... 
    }); 
}) ; 
संबंधित मुद्दे