jQuery Ajax attend que toutes les images soient chargées

Question

J'essaie d'effectuer un appel Ajax avec jQuery qui fonctionne bien. J'utilise l'événement de réussite pour afficher les données. Il semble cependant que le succès soit déclenché dès que le fichier HTML externe est chargé. S'il y a de grandes images, elles continuent de se charger après leur affichage. Existe-t-il un moyen d'afficher le contenu une fois que tout est entièrement chargé? Voici le code:

 $('#divajax').html('<br><div style="text-align: center;"><img src="res/ajax-loader.gif"></div>');
$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {
          $('#divajax').html(data);
    }
});
 

Answer 1

Le plugin que @alex a écrit n'a pas fonctionné pour moi pour une raison... je ne pouvais pas comprendre pourquoi. Mais son code source d'inspiration pour moi de venir avec un plus léger de la solution qui fonctionne pour moi. Il utilise jquery promesses. Veuillez noter que, contrairement à @alex s 'plugin, cela n'a pas été pris en compte pour les images d'arrière-plan sur des éléments, seuls les éléments img.

// Fn to allow an event to fire after all images are loaded
$.fn.imagesLoaded = function () {

    $imgs = this.find('img[src!=""]');
    // if there's no images, just return an already resolved promise
    if (!$imgs.length) {return $.Deferred.resolve().promise();}

    // for each image, add a deferred object to the array which resolves when the image is loaded
    var dfds = [];  
    $imgs.each(function(){

        var dfd = $.Deferred();
        dfds.push(dfd);
        var img = new Image();
        img.onload = function(){dfd.resolve();}
        img.src = this.src;

    });

    // return a master promise object which will resolve when all the deferred objects have resolved
    // IE - when all the images are loaded
    return $.when.apply($,dfds);

}

Ensuite, vous pouvez utiliser quelque chose comme ceci:

$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {
        $('#divajax').html(data).imagesLoaded().then(function(){
            // do stuff after images are loaded here
        });
    }
});

J'espère que c'est utile pour quelqu'un.

Answer 2

Vous pouvez utiliser mon plugin jQuery, waitForImages ...

 $.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {

         $('#divajax').html(data).hide().waitForImages(function() {
             $(this).show();
         });

    }
});
 

Cela chargera le contenu dans votre élément, le masquera, puis le reshow une fois que les éléments img descendants auront été chargés.

Answer 3

Vous pouvez lier quelque chose aux événements de chargement pour savoir quand ils sont terminés:

 $('<img>').bind('load', function() {
    $(this).appendTo('body');
});
 

Ou vous pouvez utiliser ce plugin .

Answer 4

cela se déclenche sur chaque charge img séparément:

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

j'ai utilisé:

 var loaded = 0;
$('img').on('load', function() {
   loaded++;
   if(loaded == $('img').length){
      // do something
   }
});
 

Answer 5

Envisagez d'utiliser .load () de jquery

Qui a une description de:

L'événement de chargement est envoyé à un élément lorsqu'il et tous les sous-éléments ont été complètement chargés. Cet événement peut être envoyé à tout élément associé à une URL: images, scripts, cadres, iframes et l'objet fenêtre.