JS : ne charger que les images hors display:none / hide() ?

JS : ne charger que les images hors display:none / hide() ? - HTML/CSS - Programmation

Marsh Posté le 21-12-2012 à 15:17:35    

Salut,
 
J'ai une page sur laquelle j'ai des onglets :
Onglet 1
Onglet 2
Onglet 3
Onglet 4
 
Par défaut Onglet 1 est affiché. Il contient des images.
Le clic sur Onglet 2 affiche le contenu de onglet 2 qui remplace onglet 1.
 
Ce que je voudrais c'est charger les images de Onglet 2 QUE si on l'affiche.
 
Le site utilise jQuery
 
Une idée ?
 
Merci !


---------------
Bha ouais mais bon, m'enfin quoi...
Reply

Marsh Posté le 21-12-2012 à 15:17:35   

Reply

Marsh Posté le 22-12-2012 à 14:10:50    

Si tu utilises la balises IMG, le soucis est que celles-ci commenceront à charger dés qu'elles seront dans l'arbre DOM, hidden ou pas.
 
Donc tu peux feinter l'ennemi on ne mettant pas l'attribut src, ou plutot en lui donnant un autre nom (par exemple '_src').
 
Et lors de ton changement d'onglet, via jQuery tu recuperes toutes les balises IMG dans le dit onglet, et tu changes l'attribut _src en src, la browser lancera le DL des images associées automatiquement, et ca devrait le faire.
Mais ca reste du bricolage ;)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 22-12-2012 à 15:22:51    

Une autre solution consisterait à charger le code que tu ne veux pas afficher de facon differée, via un appel ajax par exemple, et du coup, ca fait moins bricolage ;)


Message édité par SICKofitALL le 22-12-2012 à 15:23:05

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 22-12-2012 à 18:16:41    

Merci poru tes réponses mais pour des raisons de SEO je ne peux pas ne pas avoir le code et les images directement dans le DOM (sans qu'il ne soit nécessaire de faire un appel ajax ou le créer à la volée).
La solution 1 est un peu crade et la seconde plus lente.
 
En fait je crois que ce que je veux faire n'est tout simplement pas possible :(


---------------
Bha ouais mais bon, m'enfin quoi...
Reply

Marsh Posté le 22-12-2012 à 18:20:53    

Ptêtre une solution ici :
http://stackoverflow.com/questions [...] om-loading

 

Ca consiste en fait à virer l'attr src au ready de la page. Pour ton SEO ca sera clean, pour le visiteur, il ne verra les images que lorsque tu redéfiniras le src.

 

A tester :)


Message édité par SICKofitALL le 22-12-2012 à 18:22:17

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 22-12-2012 à 18:24:14    

En fait c'est ce que j'avais fait instinctivement mais ça ne fonctionne pas : ça charge tout de même l'image si elle n'est pas très lourde et ça la charge en partie puis abort si le dom ready met du temps :(


---------------
Bha ouais mais bon, m'enfin quoi...
Reply

Marsh Posté le 22-12-2012 à 18:36:35    

et en le faisant avant le DOMready justement ?
(en prenant le risque que les imgs en question ne soient pas encore dispos ...)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 22-12-2012 à 18:38:29    

Tu peux interragir sur le dom en JS avant qu'il ne soit prêt ?! TU fais comment ?


---------------
Bha ouais mais bon, m'enfin quoi...
Reply

Marsh Posté le 22-12-2012 à 19:12:55    

En fait non j'ai testé chez moi, comme tu le précisais plus haut, ca commence le chargement directement à partir du moment où le tag est dispo dans le DOM.
As-tu essayé en utisant du CSS, via background-image ?


---------------
We deserve everything that's coming...
Reply

Sujets relatifs:

Leave a Replay

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