Discussion :

[erehcab]

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 ?

[erehcab]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[andry.aime]

Essaye de pré-charger les images dans onload:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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");

[erehcab]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

plutôt que directement dans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$(window).bind("load", function() {
      $(document).ready( function () {
            $(this).exemple();
      });
 });

Est ce que ça t'inspire quelque chose ?

[danielhagnoul]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(window).ready(function(){
     ....
});

[erehcab]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[andry.aime]

Salut,
document est un attribut de window.

[danielhagnoul]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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