Eviter des téléchargements via CSS ? [ok]

Bonjour,
mon titre est assez difficile à formuler, mais l'idée est la suivante : est-ce qu'en jouant sur le media des CSS, on peut éviter au surfeur de télécharger des objets de page ?

Je m'explique : je retape un de mes sites dans lesquel des cours sont présents. J'aimerais afficher des vignettes de schémas, dans l'affichage (media="screen") et, lorsqu'on imprime la page (media="print") que les vignettes ne soient pas visible,s mais les grandes images oui.
Il suffit de jouer sur un display:none, par exemple, mais compte tenu des pages et de la lourdeur des images (même une *simple* image de 10 ko multipliée par 15 schémas ... par cours !) pourrait faire fuir d'éventuels bas débits.

Tout bien réfléchi, si l'aspect display:none; n'est jamais qu'une mise en forme d'un objet de page, cela sous-entend que le nagivateur téléchargerait quand même la vignette ET son agrandi, sans pour autant afficher ce dernier. Moi je cherche seulement à n'afficher que l'un ou que l'autre...

Les CSS peuvent-elles m'aider ? merci de vos idées & remarques.
Modifié par Malcolm (23 Jan 2007 - 21:36)

Il me semble qu'une image en display: none (ou descendante d'un élément en display: none) n'est pas chargée. D'où la nécessité de faire des « preload » en Javascript ou autre, pour les effets de survol utilisant des images.

L'une des solutions est d'afficher l'image... hors de la partie visible (à -5000px par exemple).

Il ne s'agit pas d'un effet de survool ... Lors de la lecture sur écran dudit cours, je ne souhaite pas afficher la grosse image, mais bien la vignette. et lors de l'impression de la page, je ne souhaite pas imprimer la vignette mais bien l'image complète, pour le coup ...

Afficher l'image à -5000px revient indirectement à afficher l'image ... Et donc par conséquent à la télécharger, ce que je ne souhaite pas au vu de certains cours qi comportent une 15aine, voire une 20aine de ces images. l'image "grande taille" fait entre 15 et 30 ko, imaginez une page avec 20 images ainsi faites.

Si je suis mpop, cela veut dire que ma simple solution de jongler avec un élément display (via héritage ou non, peu importe) permet de répondre à cette problématique alors ?

Merci pour vos réflexions.

Malcolm a écrit :
Si je suis mpop, cela veut dire que ma simple solution de jongler avec un élément display (via héritage ou non, peu importe) permet de répondre à cette problématique alors ?

Il me semble que oui. À vérifier par un test (en vidant le cache au préalable). Tu charges la page avec les grandes images en display: none, tu attends jusqu'à la fin du chargement de la page... puis tu entres l'URL directe d'une image un peu volumineuse. Si l'image s'affiche très rapidement, elle est déjà en cache, sinon elle n'y est pas et n'a donc pas été chargée lors du chargement de la page.
Quelque chose du genre...

Re,
tests faits avec une image de 3 Mo, son appel via URL directe semble être immédiat, je pense que l'image est quand même stockée en cache, même avec un display:none ...
ce qui voudrait dire que ce que je pensais sur le CSS (son rôle de mise en forme, mais pas d'empêchement de téléchargement) se justifie...
donc le navigateur télécharge quand même les composants (ce qui peut se concevoir, vu qu'au niveau HTML, la balise img, elle y est bien) et désactive l'affichage puisqu'un style CSS l'impose.

Je vais devoir trouver une solution serveur, ou bien en Ajax, pourquoi pas. A ceci près que je ne sais pas si l'Ajax permettra de répondre à mon pb ... A suivre !

Salut,

Sans tomber dans des solutions trop compliquées, pourquoi ne pas faire deux pages dans ce cas ? Le tout serait d'inciter le visiteur à se reporter sur la page lourde lorsqu'il souhaite faire une impression.
Modifié par koala64 (06 Jan 2007 - 20:12)

C'est effectivement la solution vers laquelle je suis en train de me pencher, une "version imprimable". Seulement mes pages étant dans une base de données, ça pourrait m'inciter à mettre du php dedans, et je ne l'avais pas encore prévu ...

Cependant je pense rester sur cette idée, merci !

Bonjour,

Juste une idée, si tu places chaque images en background d'un bloc et tu fais un css print avec ces blocs plus petits et tes vignettes en background ?
Du style:

/* css screen*/
#image{
width: 200px;
height: 200px;
background: url(image_full.jpg);
}



/* css print */
#image{
width: 20px;
height: 20px;
background: url(vignette.jpg);
}

oups !! c'est l'inverse que tu veux ... mais bon !
Modifié par ghost (07 Jan 2007 - 10:17)

Je pense que les navigateurs doivent charger les images de contenu, qu'elles soient en display: none ou pas. Par contre, les images de fond des éléments en display: none (ou correspondant au style d'un état non activé au chargement de la page, par exemple dans le cas d'un :hover) ne sont probablement pas chargées.

mpop a écrit :
Je pense que les navigateurs doivent charger les images de contenu, qu'elles soient en display: none ou pas. Par contre, les images de fond des éléments en display: none (ou correspondant au style d'un état non activé au chargement de la page, par exemple dans le cas d'un :hover) ne sont probablement pas chargées.

Yes. J'ai fait 2 test :

— Un avec les images en dur dans le code
— L'autre avec les images en background

Dans le 2e test, quand on regarde avec firebug, on voit qu'il n'y a que l'image bouillon_petit.jpg qui est téléchargée.

Par contre pas d'image dans le media print pour le 2e test. J'ai du faire un erreur mais je ne vois pas où.

Héhé, je n'avais pas cocher la case imprimer les images de fond. Ça marche mais il y a des ajustements à faire pour faire rentrer l'image dans la page.
Modifié par Patidou (07 Jan 2007 - 21:19)

Ça ne serait pas mieux le PDF pour les pages avec images HD? En «archive» ou avec script php?

Patidou a écrit :
Ça ne serait pas mieux le PDF pour les pages avec images HD? En «archive» ou avec script php?

Ben si tu veux imprimer tes images avec une résolution supérieure à 72dpi (genre 150dpi, c'est un bon compromis pour une imprimante jet d'encre pour particuliers), les CSS print ne te seront d'aucun secours. Et là, il faudra nécessairement passer par du PDF.

Si c'est pour imprimer en 72dpi, je ne vois pas de problème particulier à utiliser les CSS print.

Désolé de ressortir du néant le topic, simplement pour préciser que j'ai trouvé une autre solution.
CSS n'étant qu'une "mise en page", il n'interviendra pas sur le téléchargement des objets HTML, mais sur leur présentation, par le navigateur, au visiteur.

J'ai donc créé des vignettes de mes images qui seront affichées (à 2 ou 3ko la vignette, même multipliée par 10 ça n'alourdit pas beaucoup la page) et dans mon code HTML, je me suis créé un pseudo BBCode : [/schema] qui contient un identifiant, celui du schéma. Par une regexp PHP, j'extirpe à la construction de la page les infos de la base et je génère l'affichage de mes vignettes... et en mode "impression", j'ai de quoi afficher les pgrandes images en plus, toujours à la contruction de la page.