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)

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]

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