gif pendant chargement de page

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : gif pendant chargement de page

crasse2

bonjour !

je travail sur un site actuellement qui comporte une page d'accueil un peu lourde (rien de grave, mais suffisament lourde pour que la page ne s'affiche pas instantanément) c'est pourquoi j'ai l'intention de mettre un gif de chargement.
Bien entendu il hors de question de faire ça en ActionScript donc j'ai tenté de bricoler un code en js mais ça n'a pas l'air de fonctionner. voici ce que j'ai fait :

le js

Code :

function div_charge(id_item){
window.onbeforeunload = function (){
document.getElementById(id_item).style.display = 'block';
}
}

le css

Code :

#chrgmt {
position:absolute;
width:125px;
height:41px;
left:50%;
top:50%;
margin-top:-21px;
margin-left:-63px;
display:none;
}

et ce qu'il y'a dans le body

Code :

<body onload="MM_preloadImages('images/accueilb.png');div_charge('chrgmt')">

Code :

<div id="chrgmt"><img src="images/qap.gif" alt="wait" /></div>

y'aurait-il une erreur quelque part ?

Publicité

rufo

Pas me confondre avec Lycos!

manques pas un ; après div_charge('chrgmt') dans le body?

Ma question : est-ce que le code de la page web a été optimisé (taille des images, pas de code html/CSS/JS en trop...) :??: Vue le haut débit actuel, ça me paraît un peu inutile ce genre de technique aujourd'hui...

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

crasse2

merci pour la correction j'host et je test (vu qu'en local ça se charge instantément)

sinon pour l'optimisation, les images ne sont pas enorme : 400 ko pour les plus grosse, et y'en a qu'une sur la page index, par contre il a pas mal de code externe, notamment beaucoup de js ( l'applet jquery, un script de lightbox et un script de menu déroulant animé) plus pas mal de css (vu que j'ai monté le site entierement en div/css et nom en tableau, de ce fait il y a assez peu de code html entre les balise body mais beaucoup de css et de js) mais j'ai pas vraiment le choix (et je prefere les mise en page en div a celles en tableau.

le souci vient peut etre du fait que tout le js doive etre charger et interpreté avant l'ouverture de l'index (puisque mon site est batti sur une seule page avec des div activé ou desactivé (display none/block) au fur et mesure de la navigation.

voici un lien vers le site en question ce sera plus clair http://www.quart-avant-poing.com

Message édité par crasse2 le 17-03-2010 à 14:19:36

rufo

Pas me confondre avec Lycos!

jquery n'est pas une applet mais une lib javascript!

Pour analyser ton site, je te conseille d'installer l'extension firebug qui va te donner le temps de chargement et la taille en ko de chaque élément affiché sur ta page web.
400 ko pour une image, ça commence à faire beaucoup! Photoshop a des algos assez efficaces pour compresser les jpg ou png de manière à optimiser la taille/qualité pour le web

David Boring

Tu dois minifier tes js.
Réunir tes fichiers css en un seul, et le minifier
réunir tes images en sprite.
Pour ton image de fond, rien à faire hélas

Installes Yslow et Pagespeed pour firebug pour comprendre comment optimiser ton site.

rufo

Pas me confondre avec Lycos!

2.33 Mo pour une page d'accueil, c'est trop!

David Boring

En fait, toutes les grosses images sont chargées au démarrage.
Donc 2,2 Mo d'images, c'est vraiment très bof
Et dans photoshop, pas moyen de les réduire les versions onlines

rufo

Pas me confondre avec Lycos!

faut un photoshop client lourd >= 6.0. C'est à partir de cette version qu'il y a un algo optimisé pour les images web vraiment efficace par rapport à gimp, paint shop pro au tout autre concurrent.

David Boring

Heu, j'ai la CS4, et je n'ai pas réussi à baisser le poids de l'image de la home, et ce dans n'importe quelle format.
C'est le contenu de l'image qui permet pas de l'optimiser.
Trop de couleur, elle part dans tous les sens, etc

crasse2

waou merci pour votre aide !! pour ce qui est des images j'ai essayé aussi pas mal de reduire l'ensemble et sans trop deteriorer le visuel j'ai pas réussi a faire beaucoup mieux que ce qu'il y'a actuellement en ligne.
par contre en ce qui concerne le code, je vais regrouper les css en un comme vous le suggerez, et sinon qu'appelez vous minifier ? éliminer les style dupliqué et/ou communs ? (comme a l'air de me le suggérer le w3c css validation)

Publicité

rufo

Pas me confondre avec Lycos!

non, ça veut dire virer les espaces, sauts de lignes... En gros, c'est une sorte de compression de la mise en forme des fichiers css et js pour qu'ils prennent moins de place.

David Boring

Tu glisses tes fichiers css et js dans cette application, après traitement tes fichiers seront plus léger
http://www.phpied.com/omg-initial-checkin/

crasse2

chouette ce programme merci ! j'ai passé tout mes fichiers code dedans, certains on etait reduit jusqu'a 60 % donc ça va etre mieux (par contre je les ai réouverts, faudra pas que j'ai les yeux qui piquent pour les éditer xD) j'host tout d'ici peu et je vous tiens au courant de l'avancé !

Message édité par crasse2 le 17-03-2010 à 17:40:26

FORUM HardWare.fr

Programmation

HTML/CSS

gif pendant chargement de page

Sujets relatifs
[PHP] Système de chargement de ma page	Carrousel jQuery : ne fonctionne qu'au 2e chargement de la page
[JAVASRIPT] HELP ! Chargement page en fonction d'un test sur TEXTAREA	[Javascrit] page de chargement
Load incomplet au 1er chargement de la page avec fichier XML	Javascript + probleme lors du chargement d'une page
Page de chargement	éviter le chargement complet lorsqu'on change de page ?
Ouvrir lightbox au chargement d'une page	[résolu] Problème avec iframe et menu déroulant
Plus de sujets relatifs à : gif pendant chargement de page

Page générée en 0.056 secondes