jQuery: Dynamique de la gestion des images (en attente de chargement)

Je pense que Vous avez besoin de lier une fonction globale ajaxSuccess et puis de lier un événement de chargement de chaque image sur la page.

$.ajaxSuccess(function(){
 $('img').load(function(){
  //Your code here
 });
});

ou lorsque Vous attendez-vous à beaucoup d'images:

$.ajaxSuccess(function(){
 $('img:not(.loaded)').addClass('.loaded').bind('load',function(){
  //Your code here
 });
});

Si tout le code ci-dessus ne fonctionne pas correctement Tou pourriez mettre le code dans une fonction de callback qui ajoute html sur le site après l'ajout. à l'aide de setTimeout dans la fonction ci-dessus peut aider trop.

[modifier]

Vous pouvez générer des images <img src="something" onload="$.imgHello()" /> dans le code côté serveur et l'incrément de quelques contre dans chaque $.imgHello() appel de fonction si Vous savez comment beaucoup d'images sont là va être chargé. Mais ce n'est pas une solution que je recommande à n'importe qui.

OriginalL'auteur naugtur

Après avoir essayé d'accomplir cette tâche dans à peu près tous les moyens imaginables de la mode, celui-ci a été celui qui a enfin travaillé, et un grand merci à Naugtur pour me pointer dans la bonne direction:

var no_of_images = $('img').size();

$.extend(no_of_images);

if(no_of_images > 0) {

    var images = new Array();
    var i = 0;
    $('img').each( function() {
        images[i] = $(this).attr('src');
        i++;
    });

    i = 0;

    $(images).each( function(){
        var imageObj = new Image();
        imageObj.src = images[i];
        $(imageObj).load( function() {
            no_of_images--;
            i++;
            if(no_of_images == 0){
                functionToPerform();
            }
        });
    });
} else {
    functionToPerform();
}

Pour une explication rapide de ce qui se passe, je vais utiliser une analogie. Imaginez que chaque image est un invité à votre partie. Les lumières sont éteintes. Vous retournez sur le feu, puis de la course à chaque invité et de leur donner un morceau de papier, un stylo et un téléphone cellulaire, tout en pointant les combien de personnes vous avez remis des matériaux. Ils ont tous commencer à dessiner furieusement et puis dès qu'ils ont terminé leurs dessins, ils vous appellent et vous le dire. Pour chacune des appels, vous traversez un compte hors de votre conseil d'administration. Lorsque la dernière personne qui vous appelle (lorsque vous exécutez hors de coches sur votre planche, vous leur dites de raccrocher et d'appeler la pizza guy. C'est la pizza de temps. Si il n'y avait pas de clients pour commencer, vous appelez la pizza guy vous-même.

Si vous êtes en train de penser "Pourquoi n'avait-il créer un Image() objet pour chaque $.load(), eh bien, j'ai essayé d'aller le traditionnel jQuery route de au moyen d'un simple jQuery-sélecteur de style au lieu de l'image de l'Objet. Il a apparemment été complètement ignoré (qui s'est écrasé à la page). J'ai essayé d'utiliser Image() en conjonction avec .onLoad, et qui a fonctionné dans la mesure où de ne pas tomber de la page, mais il n'a pas de remplir la fonction pour laquelle je l'ai écrit.

Ce morceau de code est autonome, donc j'imagine qu'il peut être copypasta avais en tout chargement de l'image de l'app. Il semble assez petit pour moi afin de ne pas être intrusif. functionToPerform() agit donc comme toute fonction que vous voulez attendre pour effectuer jusqu'à ce que toutes les images sont chargées (dans mon cas, c'est l'ensemble du plugin). Toodles.

OriginalL'auteur dclowd9901