Discussion :

[nicolas2603]

Bonjour, j'utilise jquery pour faire disparaitre un texte de chargement en fadeOut lorsque la première page de mon site est chargée, et afficher la page par un fadeIn.

Pour cela j'utilise la fonction

Code :

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

1
2
3
4
$(document).ready(function(){
	$("#chargement p").fadeOut("normal");
	$("#global_content").fadeIn("normal");
});

Seulement, je pense mal interpréter le document.ready. Je pensais que le contenu de la fonction était appelé lorsque la page ET TOUT ce qu'elle contient (image Header, etc...) était chargé. Or je m'aperçois que mon texte disparait, et que lorsque la page s'affiche, je dois encore attendre 1 ou 2 sec que toutes les images soient chargées.

Comment éviter cela et lancer la fonction une fois que tout est opérationnel ? Merci d'avance.

[Bovino]

Salut,
$.ready() est lancé quand la page est complète au sens HTML, c'est-à-dire que tous les éléments sont apparus dans le DOM avec toutes leurs propriétés.
Concernant les balises images, ce sont des éléments que l'on appelle remplacés, c'est-à-dire que le moteur HTML leur réserve leur place et continue son traitement (d'où au passage, l'importance des attributs width et height de ces éléments, à ne pas confondre avec les styles du même nom) pendant que les images se chargent.
Le traitement du HTML étant beaucoup plus rapide, il est donc normal que le contenu soit disponible (événement "ready") avant que les images n'apparaissent (sauf si elles sont dans le cache).
Pour parer à cela, tu peux récupérer sur l'événement ready l'ensemble des images de la page et utiliser leur propriété complete pour incrémenter un compteur puis lorsque celui-ci vaut le nombre total d'images, lancer ton fade.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$.ready(function(){
    var compteur=0;
    var total = $$.('img').length;
    $$('img').complete(function(){
        compteur++;
        if(compteur==total){
            $("#chargement p").fadeOut("normal");
            $("#global_content").fadeIn("normal");
        }
    }
}

[nicolas2603]

Ok j'ai compris la logique. Cependant, en testant le code j'obtiens une erreur suivante : $$ is not defined sur la ligne var total = $$("img").length;.

J'ai tenté un ${$("img").length}; puisque, si j'ai bien compris, on crée une variable d'une variable, mais ça ne fonctionne pas !

[marcha]

Pourquoi ne pas utiliser window.onload ? c'est exactement ce que tu veux non ?

[nicolas2603]

Je pensais que window.onload faisaitla même chose que ce qui est indiqué par Bovino. Donc que le résultat était le même ! Je vais tester pour voir.

[Bovino]

Oui, j'ai utilisé $$ à tord, c'est du Prototype ça

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$.ready(function(){
    var compteur=0;
    var total = $('img').length;
    $('img').complete(function(){
        compteur++;
        if(compteur==total){
            $("#chargement p").fadeOut("normal");
            $("#global_content").fadeIn("normal");
        }
    }
}

EDIT :
Après recherche, complete ne semble en fait pas être reconnu non plus
Du coup, une autre solution :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$.ready(function(){
    var compteur=0;
    var total = $('img').length;
    $('img').load(function() {
        compteur++;
        if(compteur==total){
            $("#chargement p").fadeOut("normal");
            $("#global_content").fadeIn("normal");
        }
    }
}

[nicolas2603]

Je viens de tester cette dernière solution, mais à priori je ne rentre pas dans la fonction $("img").load. J'ai rajouté une ligne pour tester, et celle-ci ne s'affiche jamais et mon contenu de page ne vient pas remplacer le texte de chargement.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
    var compteur = 0;
    var total = $("img").length;
	$("img").load(function() {
        compteur++;
	    $("#chargement p").html("Chargement en cours, veuillez patienter...<br />Element " + compteur + "/" + total);
            if(compteur==total) {
                $("#chargement p").fadeOut("normal");
                $("#global_content").fadeIn("normal");
            }
    });
});

Je me demande si il sait quelles images (url) sont à charger !!..

[Bovino]

Oui, si tes images sont en cache, ça pose problème... du coup, il faut passer par une boucle while pour tester le complete de chaque image.
Voir la nouvelle entrée de la FAQ
http://javascript.developpez.com/faq...argementImages

[nicolas2603]

je vais voir ça !

[nicolas2603]

Ca m'a l'air de tout bien fonctionner ! Moi je dis : IMPEC.
Pour finir, une dernière question avant de taguer résolu : j'ai rajouter dans ma fonction une ligne qui est sensée m'indiquer le nombre d'éléments chargé au fur et à mesure, seulement ma ligne n'apparaît qu'à la fin.

Par exemple j'ai 17 images à charger, il devrait y avoir Element 1/17, Element 2/17 ... Là je me retrouve avec d'un coup Element 17/17 (même si j'ai environ 30 sec de chargement, je passe de rien à 17/17). D'où est-ce que cela peut venir ?

Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.onload=function(){
var compteur = 0, i;
var total = document.getElementsByTagName("img").length;
while(compteur!=total){
	compteur = 0;
	for(i=0; i<total; i++){
		if(document.getElementsByTagName("img")[i].complete){
			compteur++;
			$("#chargement p").html("Chargement en cours, veuillez patienter...<br />Element " + compteur + "/" + total);
		}
	}
}
$("#chargement p").fadeOut("normal");
$("#global_content").fadeIn("normal");
}

Encore merci