Comment afficher une page à la fin de son chargemement ?

Bonjour à toutes et à tous.

J'ai un ordinateur qui fonctionne d'une manière assez lente, suite au fait que je suis passé de Windows XP à Windows 7. Et lorsque je charge une page web, je vois s'afficher les différentes étapes de son chargement et c'est pas très joli.

Comment faire, afin d'obtenir l'affichage de la page, lorsque tout se qui doit se charger, est terminé ?

Je connais la technique de chargement des images, mais dans ce cas précis, je ne sais pas pourquoi, le chargement semble ne pas être terminer (autre que les images) alors que l'affichage s'effectue.

Je vais cela en JavaScript et non en Jquery. Y-a-t-il une façon de résoudre cela ?

@+
Modifié par tournikoti (11 Oct 2013 - 19:30)

Bonjour,

Optimiser le poids de la page, des images, des js...
Si tu nous donne le lien vers ton site, on pourra t'aider plus précisément.

a écrit :
Comment faire, afin d'obtenir l'affichage de la page, lorsque tout se qui doit se charger, est terminé ?

Si le temps de chargement est vraiment long tu risque de perdre pas mal de visiteur. Il est en général plus facile d'attendre quand on voit les choses arriver.
Modifié par benj (11 Oct 2013 - 22:13)

salut,
il n'y a pas vraiment de technique universelle pour faire cela. Tu pourrais mettre un <div> en position fixe qui occupe toute la largeur et hauteur de ta fenêtre en mettant un gif animé de chargement ou autres fantaisies et puis faire un "display:none" en JS une fois la page chargée avec l'évènement "load" de l'objet "winodw".
Par contre je pense perso qu'on peut faire patienter des gens avec des animations sympas pendant que la page se charge. J'en ai vu sur le net des franchement pas mal et ça donne même envie d'attendre pour voir ce que le site donne.

Bonsoir à toutes et à tous.

Il y a des images, du texte, du javascript ...
Le problème n'est pas une question de poids, mais plus la lenteur de mon ordinateur.
Et puis, c'est là où je veux en venir, à la fonction JavaScript "onload()";

En fait, j'ai toujours pensé que cela signifiait que le chargement était terminé et qu'ensuite cette fonction s'appliquait. Or ce n'est pas le cas !

Justement Zelalsan, j'ai appliqué, sur le body un "display:none".
Puis ensuite avec JavaScript, je passe le body à "display:block" pour afficher son contenu.
J'ai fait en sorte de mettre cela après toutes mes fonctions JavaScript, mais rien n'y fait.

Existe-t-il une autre fonction en JavaScript ou un évènement qui me permettrait de faire ma fonction d'affichage lorsque le chargement est terminé ?

@+

Zelalsan a écrit :
Par contre je pense perso qu'on peut faire patienter des gens avec des animations sympas pendant que la page se charge. J'en ai vu sur le net des franchement pas mal et ça donne même envie d'attendre pour voir ce que le site donne.

Humm que de bon souvenir. Comme un bon loader d'animation flash sans boutons "skip intro".

Ton expérience de geek/graphique n'est peut être pas très représentatif des visiteurs de son site.
J'admets qu'il y a des cas ou un loader peut ne pas être contraignant (une application web, un site avec des gros visuels... ?).
A l'heure du mobile et des connexion pas toujours terrible il faut mieux optimiser le poids d'un site... pour espérer garder son visiteur.

benj a écrit :

Ton expérience de geek/graphique n'est peut être pas très représentatif des visiteurs de son site.

Moi j'aurais dit qu'elle est très représentative... Enfin, je suppose que t'as ses stats sous les yeux pour pouvoir dire ça Ou alors ton expérience style années 90 plairait à beaucoup plus de gens.
Plus sérieusement, je ne suis ni geek ni graphique, la question était de savoir comment faire pour masquer les éléments en cours de chargement et ma réponse a été donc celle que j'ai donnée.
Je trouve aussi personnellement que c'est assez inesthétique et surtout si c'est un site plutôt "designé". Le principe est très simple et très basique et quand je dis animation, ça s'arrête au stade de gif animé ou un simple truc CSS, encore une fois très basique.
L'optimisation des ressources va sans dire mais parfois il y a des sites qui sont assez conséquents et qui mettront tout de même du temps à se charger.
Y'a des exemples simples

http://www.srgint.com/
http://2013.unknowncroatia.com/
http://alcyon-communication.com/
http://world.philipp-plein.com/
http://www.mindworks.gr/
http://www.simon-k.com/#k/intro/
http://oneicon.oakley.com/fear-and-loathing-in-australia/

Comme tu le vois, il n'y a rien d'extraordinaire.

@tournikoti> Comment as-tu utilisé cette fonction ? As-tu un bout de code ?

Bonsoir à toutes et à tous.

J'aurai dû commencer par cela. Voici le code Javascript.

/*=====================================*/
/*     Le Préchargement des Images     */
/*=====================================*/

function preload()
{
	var images = new Array();

	for (var z=0; z<preload.arguments.length; z++)
	{
		images[z]     = new Image();
		images[z].src = preload.arguments[z];
	}
}

/*======================================================================*/
/*     Calcul de la Position du Footer en Bas de Page ou de Fenêtre     */
/*======================================================================*/

function calcul ()
{
	var wh=0;	 /* hauteur fenêtre */

	if (typeof(window.innerHeight)=='number')	wh=window.innerHeight;
	else
	{
		if (document.documentElement&&document.documentElement.clientHeight)
				wh = document.documentElement.clientHeight;
		else	if (document.body&&document.body.clientHeight)
					wh=document.body.clientHeight;
	}

	var sh=document.getElementById('un').offsetHeight;	/* hauteur section */
	var fh=document.getElementById('deux').offsetHeight;	/* hauteur footer  */

	if (wh>=(sh+fh))	document.body.style.height='100%';
}

/*=============================*/
/*     Appel des fonctions     */
/*=============================*/

window.onload	= function ()
{
	preload("/Images/Photo_1", "/Images/Photo_2");

	calcul();

	document.body.style.display="block";
}

Ce qui se passe et c'est cela que je ne comprends pas, on dirait que le chargement des images se fait après la fin de l'exécution du code JavaScript, c'est-à-dire au moment où je remets le body à "display:block".
Avec le préchargement que j'ai installé en JavaScript, c'est pire que s'il y en avait pas.
Qu'est-ce que j'ai mal fait en JavaScript ?

@+
Modifié par tournikoti (12 Oct 2013 - 04:06)

franchement chuis à moitié endormi mais je pense que tu dois sortir les appels aux fonctions preload() et calcul() de la fonction du "onload" pour que ça marche vu que ces fonctions sont entrain d'être appelées qu'une fois le document chargé.

Bonsoir Zelalsan.

Encore derrière ton écran à cette heure tardive de la nuit ?

Une des astuces que j'avais déjà utilisé consistait à mettre, dans le HTML, une balise div avec "display:none".
A l'intérieur de cette boîte, je mettais toutes les images que j'utilisais dans une lightBox de mon cru.
Et cette LightBox était activé en pressant sur un bouton.
Dès que j'appuyais sur le bouton, ma boîte passait en "display:block" et la LightBox s'affichait.

Maintenant pour un autre usage, j'ai voulu faire différemment, en chargeant ces images directement dans le code JavaScript.
Bien sûr, l'appel de la fonction se fait dans le "onload = function () { ... };".
Je ne vois pas comment faire autrement cet appel, vu que les images apparaissent directement sur la page html et cette fois-ci ne sont pas visualisées das une LIghtBox.

De plus, le mini calcul que je fais, consiste à positionner mon footer en fonction de la hauteur de la page HTML, afin que cette page reste dans le flux.
Pas d'astuces avec des "float" ou des "position".

Donc comment afficher ma page, dès que le chargement se termine ?

@+

salut,
je n'ai pas compris ce que tu cherches à faire ou pourquoi tu le fais de la sorte. Un chargement asynchrone d'images peut se faire d'une manière très simple.
Tu crées une image vierge de 1x1 px, tu ajoutes une balise <img> dans ton code avec un "src" pointant vers cette image vierge. Tu crées ensuite un attribut avec "data-" que tu appelleras par exemple "data-src". Tu récupères ensuite en JS toutes les images ayant cet attribut "data-src" et tu remplaces leur "src" d'origine par celui-ci. Tu ajoutes à chaque fois une balise <noscript> avec l'image ayant le bon "src" au cas où JS serait désactivé et le tour est joué. Tu peux même ajouter des gifs animés de loading directement dans le "src" d'origine pour faire patienter entre temps.
Je te donne un exemple

<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif" width="32" height="32" data-src="http://img0.gtsstatic.com/wallpapers/a2b02b50666a643129f0c4bc42ef3593_large.jpeg|2560|1600" alt="" />

<noscript>
   <img src="image-a-utiliser.jpg" width=1920 height=480 alt="" />
</noscript>
<img src="gif-anime.gif" width="32" height="32" data-src="image-a-utiliser.jpg|1920|480" alt="" />

Les "width/height" sont ceux du gif animé et dans l'attribut "data-src", tu spécifies le chemin vers l'image à charger, suivi de "|", puis de la largeur de l'image à charger, puis d'un autre "|", puis de la hauteur de l'image à charger (je sais ça peut être un peu tordu mais bon...).

Et le JS qui va avec

function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}

var imgToLoad = document.querySelectorAll("img[data-src]"),
	dataImgCt = [], srcTarget = [], imgWidth = [], imgHeight = [], countLoadedImgs = 0;

for(var i=0, l=imgToLoad.length; i<l; i++){
	dataImgCt[i] = imgToLoad[i].getAttribute("data-src");

	var	idxF = dataImgCt[i].indexOf("|"),
		idxS = dataImgCt[i].lastIndexOf("|");
	srcTarget[i] = dataImgCt[i].substr(0, idxF);
	imgWidth[i] = parseInt(dataImgCt[i].substr(idxF + 1, idxS));
	imgHeight[i] = parseInt(dataImgCt[i].substring(idxS + 1));

	imgToLoad[i].style.padding =((imgHeight[i]-imgToLoad[i].clientHeight)/2) +"px "+ ((imgWidth[i]-imgToLoad[i].clientWidth)/2) +"px";
}

function allLoaded(){
	alert("Fini !");
}

function loadImages(){
	var imgTemp = [];
	for(var i=0, l=imgToLoad.length; i<l; i++){
		imgTemp[i] = document.createElement("img");
		imgTemp[i].onload = function(){
			var idx = imgTemp.indexOf(this);
			imgToLoad[idx].src = this.src;
			imgToLoad[idx].width = imgWidth[idx];
			imgToLoad[idx].height = imgHeight[idx];
			imgToLoad[idx].style.padding = "0";
			(imgToLoad[idx].parentNode.className=="loading") && (imgToLoad[idx].parentNode.className="");
			countLoadedImgs++;
			countLoadedImgs == imgToLoad.length-1 && allLoaded();
		}
		imgTemp[i].src = srcTarget[i];
	}
}

addEvent(window, 'load', loadImages, false);

Lorsque toutes les images sont chargées, la fonction allLoaded() est déclenchée.

Je pense que pour exemple... c'est un bon exemple [/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]

Bonsoir à toutes et à tous.

@ Zelalsan : Aïe, aïe, aïe !
Évite de mettre dans une balise [ code ] ... [ /code ] des indices i entre crochets, car cela sera interprété comme une balise italique. Mets à la place un indice z comme je l'ai fait !

Merci pour ton code, je vais l'utiliser !

En ce qui concerne mon problème, je l'ai résolu. C'est tout bête, je n'aurai pas dû utiliser la propriété "display:"none". Mais en mettant à la place "visibility:hidden", j'obtiens ce que je voulais :

1) la non affichage de ma page principale tant que le chargement des images ne s'est pas terminé.
2) tous les calculs du positionnement de ma page se font avant que je rétablisse l'affichage. C'est la différence qui il y a entre "display:none" qui empêche le calcul puisque la page n'est pas chargé alors que "visibility:hidden" charge la page, calcul les positions, mais n'affiche rien.

Ps : pour le modérateur : je me suis trompé de sous-forum en créant ce sujet. Il serait bien de le placer dans celui du JavaScript. Je suis désolé d'avoir occasionné cette bévue.

@+

Zelalsan a écrit :
Plus sérieusement, je ne suis ni geek ni graphique, la question était de savoir comment faire pour masquer les éléments en cours de chargement et ma réponse a été donc celle que j'ai donnée.
Je trouve aussi personnellement que c'est assez inesthétique et surtout si c'est un site plutôt &quot;designé&quot;. Le principe est très simple et très basique et quand je dis animation, ça s'arrête au stade de gif animé ou un simple truc CSS, encore une fois très basique.
L'optimisation des ressources va sans dire mais parfois il y a des sites qui sont assez conséquents et qui mettront tout de même du temps à se charger.
Y'a des exemples simples

http://www.srgint.com/
http://2013.unknowncroatia.com/
http://alcyon-communication.com/
http://world.philipp-plein.com/
http://www.mindworks.gr/
http://www.simon-k.com/#k/intro/
http://oneicon.oakley.com/fear-and-loathing-in-australia/

Comme tu le vois, il n'y a rien d'extraordinaire.

Ca va mieux en le disant comme cela. Cela-dit, le fait de me sortir une liste de site comme ça, me fait croire que tu est bien geek sur les bords

benj a écrit :

Ca va mieux en le disant comme cela. Cela-dit, le fait de me sortir une liste de site comme ça, me fait croire que tu est bien geek sur les bords

loll si tu veux...