jQuery .load(), n'affiche pas de nouveau contenu tant que les images n'ont pas été chargées

Question

J'ai travaillé sur un diaporama photo jQuery. Il met à l'échelle les images à la taille du navigateur, et les glisse à gauche et à droite. Il n'y a pas de taille ou de format prédéfini, le script fait tout à la volée. Il nécessite que toutes les images soient entièrement chargées, il peut donc redimensionner chaque image individuelle en fonction de son propre format (width():height(), etc.), calculer la largeur de div divisée, et calculer la distance de diapositive d'une image à l'autre.

En mode autonome, ça marche plutôt bien (malgré mon manque de compétences)! Je cache simplement le diaporama contenant div à (document).ready, permet le chargement des images, puis exécute les scripts de préparation du diaporama au (window).load. Une fois cela fait, cela ne fait qu'apparaître les divs, les images, etc. du diaporama, correctement dimensionnés, positionnés et prêts à rouler.

Le but ultime est de pouvoir charger n'importe quel nombre de diaporamas sans actualiser la page. Le but de ceci est de pouvoir jouer de la musique de fond ininterrompue. Je sais que la musique sur les sites Web est agaçante, mais le marché cible l'aime beaucoup!

J'utilise

(target).load(page.php .element, function prepInsertNewShow() { 
    //Prepare slideshow 
    resizeImages(); 
    slideArray(); 
    //Show slideshow 
    (target).fadeIn(); 
}); 

et il fonctionne vraiment! Le problème est que je ne peux pas trouver un moyen de retarder la préparation et l'affichage du nouveau contenu jusqu'à ce que les images aient fini de se charger. Il exécute les scripts de préparation du diaporama (qui dépendent totalement du chargement complet des images) avant le chargement des images. Cela se traduit par un spectacle complètement gonflé! Qu'est-ce que je veux faire est ce -

(target).load(page.php .element, function prepInsertNewShow() { 
    //Wait until images are loaded 
    $('img').load(function() { 
     //Prepare slideshow 
     resizeImages(); 
     slideArray(); 
     //Show slideshow 
     (target).fadeIn(); 
    } 
}); 

Mais cela ne semble pas fonctionner, le nouveau contenu n'est jamais montré.

You can see a live version here.

La galerie initiale se charge correctement, tout a l'air bien. Le seul lien de nav qui fonctionne est Galleries> Engagement, qui va charger un nouveau show (un div contenant avec plusieurs tags <img>). Vous verrez que les images ne sont pas centrées, les distances div et slide sont trop petites, car elles ont été calculées en utilisant des images qui n'étaient pas réellement chargées.

Est-il possible de retarder la gestion et l'affichage de nouveau contenu jusqu'à ce qu'il soit complètement chargé? Toutes les suggestions seraient les plus appréciées, merci pour votre temps! PS - Il m'est apparu juste en tapant ceci qu'une solution décente pourrait être d'insérer "width=x" height="x" dans les balises <img>, ainsi le script peut fonctionner à partir de ces valeurs, même si les images ne sont pas chargées ... hmm .. .

Answer 1

Essayez de faire quelque chose comme ceci:

$.ajax({ 
    url: 'page.php', 
    success: function(data) { 
     var element = $(data).find('.element'); 
     element.find('img').addClass('loading').bind('load',function(){ 
      if (!element.find('img.loading').length) { 
        //Prepare slideshow 
        resizeImages(); 
        slideArray(); 
        //Show slideshow 
        $('#target').fadeIn(); 
      } 
     }); 
     $('#target').empty().append(element); 
    } 
}); 

Answer 2

Merci pour votre réponse petersendidit! J'ai joué avec cette technique pendant un certain temps et j'ai eu un succès mitigé. Je l'ai eu pour fonctionner, mais il a gelé le navigateur pendant quelques secondes chaque fois. Je pense que c'était parce qu'il a fait toute la routine de préparation de diaporama sur chaque image individuelle, par opposition à une fois pour l'ensemble entier.

J'ai effectivement réussi à résoudre ce problème, et c'était très facile, mais cela ne répond pas nécessairement à la question initiale.J'ai simplement inséré des valeurs de largeur et de hauteur dans le HTML et le script a ensuite pu formater correctement le spectacle sans charger les images, car il saisit les données nécessaires directement à partir du balisage, par opposition aux images elles-mêmes! C'était ma pensée "PS" ci-dessus. Encore mieux, c'est que l'application PHP que j'utilise pour servir les images (slideshowpro - awesome), est capable d'insérer automatiquement ces valeurs. AWW ouais.

Je dirai que le processus d'écriture de cette question m'a directement aidé à résoudre mon problème, alors merci pour ce stackoverflow!