Bild laden

Question

Ist es möglich, zu erkennen, sobald ein Bild mit jQuery geladen wurde?

Answer 1

Sie können das .load() Event-Handler, wie folgt aus:

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

Seien Sie sicher, dass es befestigen vor Einstellung der Quelle oder das Ereignis ausgelöst haben, bevor Sie einen Handler für sie hören angebracht (zB Laden aus dem Cache).

Wenn das nicht machbar (Einstellung der src nach Bindung), sollten Sie prüfen, ob es und es selbst geladen wird ausgelöst, wie folgt aus:

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

Answer 2

Es ist nur so einfach schlicht Javascript zu verwenden:

// 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; 

Answer 3

ich habe auch erforscht dies für lange Zeit, und haben dieses Plugin wunderbar Hilfe bei diesem gefunden: https://github.com/desandro/imagesloaded

Es scheint, als ob eine Menge Code, aber ... Ich fand keine andere Möglichkeit zu überprüfen, wenn ein Bild geladen wurde.

Answer 4

Die Verwendung von jQuery on ('load') - Funktion ist der richtige Weg, um zu überprüfen, ob das Bild geladen ist. Beachten Sie jedoch, dass die Funktion on ('load') nicht funktioniert, wenn sich das Bild bereits im Cache befindet.

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 
    }); 
} 

Answer 5

ich denke, das Ihnen ein wenig helfen können:

So

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

, wenn es geladen - Originalbild angezeigt. In anderen - wird Bild gezeigt, das Tatsache mit abgestürzten Bild oder 404 HTTP Header enthält.

Answer 6

Es ist einfach, mit jquery:

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

Wenn es versucht, mit:

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

aber das wird nicht überprüfen, ob das Bild Last. Dieses Feuer wird ausgeführt, wenn der Code geladen ist. Andernfalls können Sie überprüfen, ob Code erstellt wurde, dann die IMG-Ladefunktion auslösen und prüfen, ob das Bild wirklich geladen ist. So haben wir eine Kombination aus beidem:

$('tag')html('<img src="'+pic+'" />').promise().done(function(){ 
    $('img').load(function(){ 
    //do something like show fadein etc... 
    }); 
}) ;