Wykryj ładowanie obrazu

Question

Czy można wykryć, gdy obraz został załadowany za pomocą jQuery?

Answer 1

Można użyć obsługi .load() zdarzeń, takich jak to:

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

Pamiętaj, aby dołączyć go przed ustawieniu źródła lub wydarzenie mogło zwolniony przed załączeniu obsługi słuchać na nim (np. ładowanie z pamięci podręcznej).

Jeśli to nie wykonalne (ustawienie src po związaniu), należy sprawdzić, czy jest naładowana i ogień go samodzielnie, tak:

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

Answer 2

To tak proste w użyciu zwykłego Javascript:

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

Byłem również badany przez długi czas, i odkryli tej wtyczki, aby cudownie pomóc z tym: https://github.com/desandro/imagesloaded

Wygląda na to, że jest strasznie dużo kodu, ale ... Nie znalazłem innego sposobu sprawdzenia, kiedy obraz został załadowany.

Answer 4

Korzystanie z funkcji jQuery on ("load") jest właściwym sposobem sprawdzenia, czy obraz jest załadowany. Należy jednak pamiętać, że funkcja on ("load") nie działa, jeśli obraz jest już w pamięci podręcznej.

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

myślę, może to pomóc trochę:

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

Więc jeśli załadowane - zostanie pokazany oryginalny obraz. W innym - zostanie wyświetlony obraz, który zawiera fakty z uszkodzonym obrazem lub nagłówkiem HTTP 404.

Answer 6

Łatwo z jQuery:

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

Jeśli próbowałeś go z:

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

jednak, że nie będzie sprawdzić, czy obraz jest obciążenie. Ten ogień został zrobiony, jeśli kod jest ładunkiem. W przeciwnym razie możesz sprawdzić, czy kod został wykonany, a następnie uruchomić funkcję ładowania obrazu i sprawdzić, czy obraz jest naprawdę załadowany. Więc robimy kombinację obu:

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