Diviser le chargement d'une page en 2 phases / preload et onload

Diviser le chargement d'une page en 2 phases / preload et onload - HTML/CSS - Programmation

Marsh Posté le 11-03-2012 à 20:16:39    

Bonjour à tous,  
 
Donc je débarque dans le monde de la création web, mais mine de rien j'ai déjà compris et fait pas mal de trucs.  
 
J'ai actuellement un petit soucis, que j'arrive pas du tout à régler. J'ai une page avec des photos en miniature, et lorsqu'on clique dessus, elles s'affichent en gros.  
J'ai fait un script "preloadimages" pour que les gens n'aient pas à attendre lorsqu'ils cliquent sur les miniatures. Ca marche bien;  
 Ensuite, j'ai remarqué que le chargement de la page était bien bordélique et dégueulasse, et du coup j'ai fait un script pour m'afficher un logo de chargement pendant le chargement de la page. (onload ).   Ca marche bien, sauf que du coup c'est trop long... ><  Les gens se tapent tout le chargement de la page et donc aussi les images en préload pendant le onload.  (c'est évidemment logique...)    
 
L'idéal (car oui je suis chiant :D ) serait que le logo de chargement s'affiche pendant le chargement de la page, mais que les grosses images auparavant préloadées se préloadent après le premier chargement de la page mais avant qu'on clique dessus...   En gros un chargement en deux temps... Une telle chose est-elle possible?  merci !!

Reply

Marsh Posté le 11-03-2012 à 20:16:39   

Reply

Marsh Posté le 11-03-2012 à 20:39:23    

heu les miniatures sont des version réduites des images ou alors tu as fait n'importe quoi et tu as mis les grandes images que tu as réduit via HTML (width / height spécifiés)


---------------
Blablaté par Harko
Reply

Marsh Posté le 11-03-2012 à 21:20:07    

Les miniatures sont des versions réduites des images, mais au final j'ai quand même deux images enregistrées... une exemple.jpg et une exemple_small.jpg.    
 
En fait j'ai des layers en Hidden avec les grosses images dedans, et quand on clique dessus (onclick) ils se mettent en Visible. On reclique dessus et ils redeviennent en Hidden.    
 
Mon code se décompose ainsi :    
mes divs des grosses images codées en CSS    
Mes scripts (preloadImages,  showhidelayers, onload,...)  
Un tableau avec les images miniatures, les layers, et les comportements de tout ca (onload on affiche les miniature et cache les layers, onclick on affiche les layers)  

Reply

Marsh Posté le 11-03-2012 à 21:27:27    

très très mauvaise idée. Tes images en "fullsize" ne doivent même pas être présentent dans le HTML. Tu dois avoir un lien vers l'image fullsize sur chacune de tes miniatures et via un script bien fait, tu génères le HTML en tenant compte du lien vers l'image complète.
 
Donc ta technique de base est mauvaise, et très très obsolète.


---------------
Blablaté par Harko
Reply

Marsh Posté le 11-03-2012 à 21:37:19    

Ok merde...  Merci pour la réponse.   Par contre j'aimerais bien que l'image fullsize s'affiche sur la même page, car je suis quand même très attaché au rendu que j'ai maintenant.   Bon pour mon problème, au pire je peux aussi laisser le logo de chargement, et virer le preload...  Et chaque image se chargera quand on cliquera dessus et puis c'est tout. M'enfin.     C'est quoi qui est mauvais dans l'idée?

Reply

Marsh Posté le 11-03-2012 à 21:47:49    

Oui,mais dans ce cas utilise des scripts fait correctement, pas les outils de merde de Dreamweaver.


---------------
Blablaté par Harko
Reply

Marsh Posté le 11-03-2012 à 22:12:07    

J'utilise dreamweaver uniquement pour aller plus vite niveau CSS et html, j'ai chopé tous mes scripts sur internet, je sais même pas comment on les laisse faire par dreamweaver. Et je travaille beaucoup dans le code source histoire d'avoir un truc propre.

Reply

Marsh Posté le 11-03-2012 à 22:19:18    

C'est bien, mais tes multiples scripts relèvent au final du bricolage, pourquoi ne pas utiliser de trucs tout prêts qui utilisent jquery ?  
 
exemple : http://leandrovieira.com/projects/jquery/lightbox/


---------------
Blablaté par Harko
Reply

Marsh Posté le 11-03-2012 à 22:24:00    

Ouais j'avais lu un truc sur jquery, mais je me suis justement dit que c'était plus sympa de bricoler moi même et d'avoir du fait maison. C'est du perso comme site donc de toutes facons...  Enfin j'irais voir Jquery de plus près...    

Reply

Marsh Posté le 11-03-2012 à 22:47:20    

oui c'est une très bonne idée d'essayer de faire soit même pour apprendre, mais après est-ce vraiment nécessaire pour toi d'apprendre le javascript pur si tu ne cherches pas à en faire ton métier ?
 
Je suis développeur javascript pur, je peux développer demain un framework ou une librairie s'il le faut. L'utilisation de Jquery ou librairie équivalente est un gain de temps en développement quand on tape dans le DOM comme tu le fais ici.


---------------
Blablaté par Harko
Reply

Marsh Posté le 11-03-2012 à 22:47:20   

Reply

Marsh Posté le 11-03-2012 à 23:05:53    

Bah on va dire que je suis jeune et que j'ai que ca à faire. ^^ Nan, c'est juste que ca m'interresse, et que ca me fait plaisir de pouvoir voir mon boulot à la fin.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed