Comment charger une image de manière asynchrone avec jQuery et comment savoir quand le chargement de l'image est terminé?

Question

Comment charger une image de manière asynchrone avec jQuery et comment savoir quand le chargement de l'image est terminé?

Answer 1

JQuery Image Loading

Dans notre version de base, nous aurons un seul div contenant une fileuse de chargement et une fois notre grande image est chargée (en arrière-plan), nous allons retirer la fileuse et insérez notre image.

Vous savez quand l'image a été chargée avec succès, lorsque la exectution atteint la fonction pointée dans l'option success, par exemple:

$.ajax({ 
    url: 'image-map.php', 
    data: 'img=' + i.src, // the image url links up in our fake database 
    dataType: 'html', 
    success: function (html) { 
    // because we're inside of the success function, we must refer 
    // to the image as 'img' (defined originally), rather than 'this' 
    $('#loader') 
     .removeClass('loading') 
     .append(img) 
     .append(html); 

    // now show the image 
    $(img).fadeIn(); 
    } 
}); 

Answer 2

How to check that image is loaded. Il utilise la fonction jquery ajax load().

Answer 3

jQuery avait une méthode de charge qui peut être utilisé pour vous informer quand une image a été téléchargée Donc, dans votre cas, vous utiliseriez jquery pour faire une requête ajax qui retournerait un src à l'image, puis créer un nouvel objet image et appliquer la méthode de chargement comme ci-dessous.

var $img = $('<img>'); 
$img.attr('src', 'image.jpg').load(function() { 
    alert('Image Loaded'); 
    //use jquery here to insert your image into the DOM 
}); 

J'espère que c'est clair. J'ai supposé que vous saviez comment faire une requête ajax si vous posiez des questions sur le chargement de l'image.

Merci Nick