Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1331 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2130758
blackowl
Posté le 11-03-2012 à 20:16:39  profilanswer
 

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 !!

mood
Publicité
Posté le 11-03-2012 à 20:16:39  profilanswer
 

n°2130761
gatsu35
Blablaté par Harko
Posté le 11-03-2012 à 20:39:23  profilanswer
 

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
n°2130767
blackowl
Posté le 11-03-2012 à 21:20:07  profilanswer
 

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)  

n°2130769
gatsu35
Blablaté par Harko
Posté le 11-03-2012 à 21:27:27  profilanswer
 

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
n°2130771
blackowl
Posté le 11-03-2012 à 21:37:19  profilanswer
 

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?

n°2130773
gatsu35
Blablaté par Harko
Posté le 11-03-2012 à 21:47:49  profilanswer
 

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


---------------
Blablaté par Harko
n°2130775
blackowl
Posté le 11-03-2012 à 22:12:07  profilanswer
 

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.

n°2130778
gatsu35
Blablaté par Harko
Posté le 11-03-2012 à 22:19:18  profilanswer
 

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
n°2130782
blackowl
Posté le 11-03-2012 à 22:24:00  profilanswer
 

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...    

n°2130784
gatsu35
Blablaté par Harko
Posté le 11-03-2012 à 22:47:20  profilanswer
 

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
mood
Publicité
Posté le 11-03-2012 à 22:47:20  profilanswer
 

n°2130789
blackowl
Posté le 11-03-2012 à 23:05:53  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Script générant du JS => accès à $_GET de la page appelante ?Différence de chargement d'une API entre exécution class et Jar
[html] Page de chargement/méthodecharger une page html avec id/passwrd
Ordre de chargement des éléments d'une page web 
Plus de sujets relatifs à : Diviser le chargement d'une page en 2 phases / preload et onload


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR