Chargement d'animation réalisé avec jquery

Bonjour à tous,

J'utilise sur un site un diaporama de photo avec fondu enchainé (plugin jquery innerfade). Lorsque l'on charge la page une première fois rien n'apparait. Il faut recharger le document à l'aide de F5 pour que les photos apparaissent. Si je fais CTRL F5 (vider le cache navigateur) tout re disparait de nouveau.
Je pensais avoir un problème de chargement des images mais j'ai testé en les pré chargent et ça ne change rien ...

Quelqu'un aurait'il une info susceptible de m'aider ?

Après plusieurs test je me suis rendu compte qu'au premier chargement de ma page il ne prend la hauteur du conteneur qui reçoit le diaporama.

voici le code :

Code:

---

1 2 3 4 5 6 7 8

var height_diaporama = $('#diaporama li:first-child').height ();   $('#diaporama > li').each ( function () { if (height_diaporama < $(this).height()) height_diaporama = $(this).height(); });   $('#diaporama').innerfade({ speed: 'slow', timeout: 4000, type: 'sequence', containerheight: height_diaporama+'px' });

---

Si je fais un alert de la variable height_diaporama au premier chargement il m'indique qu'elle vaut 0. Si je recharge ma page il lui donne bien la hauteur qu'elle doit prendre.

Essaye de pré-charger les images dans onload:

Code:

---

1 2 3 4 5 6 7 8 9 10

jQuery.preloadImages = function() { for(var i = 0; i<arguments.length; i++) { jQuery("<img>").attr("src", arguments[i]); } } $.preloadImages("image1.gif", "image2.gif", "image3.gif");

---

J'ai déjà essayé et ça n'a rien changé ... Ce n'étais pas avec cette méthode, je vais donc voir avec cette méthode si ça fonctionne.
Pour information j'ai essayé en chargeant toutes mes images dans un conteneur que je passais en display: none.

J'ai déjà eu ce problème avec en utilisant un plugin de sliders d'image et je l'ai résolu en intégrant le code d'appelle du plugin dans :

Code:

---

$(window).bind("load", function() { });

---

plutôt que directement dans :

Code:

---

$(document).ready( function () {});

---

Sachant que le premier évènement est intégré à l'intérieur du second dans mon code :

Code:

---

1 2 3 4 5 6

$(window).bind("load", function() { $(document).ready( function () { $(this).exemple(); }); });

---

Est ce que ça t'inspire quelque chose ?

Code:

---

1 2 3 4 5 6

$(window).bind("load", function() { $(document).ready( function () { $(this).exemple(); }); });

---

Cela ne reviendrait-il pas au même de faire :

Code:

---

1 2 3 4

$(window).ready(function(){ .... });

---

Je me suis trompé, en faite c'est ça :

Code:

---

1 2 3 4 5 6 7 8

$(document).ready( function () { $(window).bind("load", function() { $(this).exemple(); }); });

---

Et en faite j'aimerai bien savoir quelle est la différence entre window et document ?

Salut,
document est un attribut de window.

Bonjour.

Il faut utiliser $(window).load() et non $(window).ready()

La nouvelle documentation sur l’API jQuery 1.4 est très claire sur ce point.

L’événement ready est exclusivement destiné à l’usage suivant :

Code:

---

$(document).ready(function(){…});

---

ou

Code:

---

$(fonction(){…});

---

dans sa forme abrégée.

Pour window nous devons, et nous aurions déjà dû sous jQuery 1.3.2, utilisez l’événement load :

Code:

---

$(window).load(fonction(){…});

---

Il n’y a pas de forme abrégée.