web-dev-qa-db-de.com

Ermitteln Sie die Bildlast

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

55
Pablo

Sie können den Ereignishandler .load() wie folgt verwenden:

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

Stellen Sie sicher, dass Sie es anhängen , bevor Sie die Quelle festlegen . Andernfalls wurde das Ereignis möglicherweise ausgelöst, bevor Sie einen Handler anhängen, der darauf wartet (z. B. Laden aus dem Cache).

Wenn dies nicht möglich ist (Setzen von src nach dem Binden), prüfen Sie, ob es geladen ist, und feuern Sie es selbst wie folgt ab:

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

Es ist genauso einfach, einfaches 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;
18
Peter Ajtai

Ich habe auch lange nachgeforscht und dieses Plugin als wunderbare Hilfe gefunden: https://github.com/desandro/imagesloaded

Es scheint eine Menge Code zu sein, aber ... ich habe keine andere Möglichkeit gefunden, um zu überprüfen, wann ein Bild geladen wurde.

4
vsync

Die Verwendung der Funktion "jQuery on" ("Laden") ist der richtige Weg, um zu überprüfen, ob das Bild geladen ist. Beachten Sie jedoch, dass die Funktion Ein ('Laden') 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
     });
}
4
jroi_web

Mit jquery ist das ganz einfach:

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

Wenn es mit versucht:

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

das prüft aber nicht ob das bild geladen ist. Das Feuer getan, wenn der Code geladen ist. Andernfalls können Sie überprüfen, ob der Code ausgeführt wurde, und dann die Funktion zum Laden des Bilds auslösen und prüfen, ob das Bild wirklich geladen ist. Also machen wir eine Kombination von beidem:

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

Ich denke das kann dir ein bisschen helfen:

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

Also, wenn es geladen ist - wird das Originalbild angezeigt. In anderen - wird ein Bild angezeigt, das ein abgestürztes Bild oder einen 404-HTTP-Header enthält.

0
Roman Kozin