Chargement image carousel

[shookai]

Bonjour,

j'utilise un carousel sur ma homepage, et au moment du chargement de la page, on voit toutes les photos du carousel se charger... Et c'est moche !! existe t il une parade pour que le chargement des images soit plus sympa visuellement ?
Merci pour votre aide.

Cdt,

Julien

[shookai]

up !!!! 

Comment précharger les images avant l'affichage ?

Il y aurait une méthode en js mais la source des images du carousel est appelée par du smarty :

 

var img = new Image();

img.src="{$link->getMediaLink("`$smarty.const._PS_IMG_`m/`$item.id_manufacturer`-`$mancarousel['type']`.jpg")}";

 

comment integrer le smarty et recuperer la source de l image pour la preloader avec du js ?

Merci pour votre aide.

[YopixelAE]

Bonjour,

Votre carrousel charge toutes les images au chargement de la page, ce qui n'est pas une bonne chose.

Visuellement les images apparaissent un court moment, mais surtout le temps chargement de la page est allongé.

Vous comptez précharger ces images, mais ceci ne va pas améliorer la vitesse de chargement global de la page. La meilleure solution est d'opter pour un lazy-loading des images, de sorte qu'elles ne seront chargées que sur demande (au déclenchement du scroll par exemple). A noter que le bootstrap de PrestaShop dispose d'une fonction lazy-load que vous pouvez utiliser.

Si la vitesse de chargement n'est pas un critère pour vous, et que vous voulez seulement cacher les images au chargement pour éviter l'effet visuel indésirable, appliquez une propriété CSS display:none aux images (ajout d'une class "hidden" dans le .tpl) et retirez cette propriété (en supprimant la class CSS) via une fonction JS (par exemple dans le global.js) une fois le document prêt.

Edited August 4, 2014 by Yopixel (see edit history)

[shookai]

Merci pour ta reponse. Je vais jeter un coup d oeil... Merci