Technique lazy-load

[CelluleDev]

Chargement progressif de vos images en JavaScript (Lazy-load)

Bonjour, 

suite à un lag sur l'accueil de mon site internet, 

j'ai 130produits d'afficher sur ma page d'accueil , j'aimerais faire comme c-discount et ne pas diminuer mes produits en page d'accueil et utiliser la technique lazy load ,

est ce que quelqu'un peux m'éclairer dans quel dossier du prestashop puis-je rajouter des fonctions js pour mettre en place cette technique sur tout mon site.

<img class="lazy-load" src="/images/....." alt="" data-src="http://www.exemple.com/images/big-image.png" />

 

(mon slider se charge quand toute la page est chargé.)

 

en attendant votre retour

 

Cordialement

Edited April 19, 2019 by mikka66 (see edit history)

[Mediacom87]

Bonjour,

pour ajouter simplement un fichier js à un site PrestaShop il suffit de le placer dans le dossier autoload et hop il se chargera sur toutes les pages.

[CelluleDev]

merci pour votre reponse, 

l'autoload.php est dans la racine de mon site internet , de mon dossier web , je dois donc déposer mes fichiers js à la racine de mon site internet ? 

[Mediacom87]

Ah, vous êtes en PrestaShop 1.7.

Donc, je ne sais pas, mais avez vous essayé de déposer le script js dans le répertoire assets/js/ du template ?

[CelluleDev]

non je n'ai fait aucune manipulation  

[Mediacom87]

En relisant votre question, j'ai un gros doute.

Avez-vous un script js de lazyload qui va traiter les images lorsque vous aurez reconfiguré toutes les balises images de votre site ?

[CelluleDev]

Non je n'ai pas encore de script js lazy load mais j'aimerai le déposer dans le bon fichier 

[Mediacom87]

Faut il encore savoir où le script doit être mis en place, car ce n'est pas toujours la même chose.

[CelluleDev]

Bonjour, 

désolé pour ma réponse un peu tardive , 

j'aimerai d’abord rajouter la class lazy load sur toutes les images  de mon site internet que j'aimerai charger de façon progressive de cette façon:

exemple : 

<img class="lazy-load" src="/images/blank.gif" alt="" data-src="http://www.exemple.com/images/big-image.png" />

Pour remplacer les class lazy load des balises img , si je veux utilise cette fonction sur tout mon site , je dois modifier quels fichiers ? , je comprends le principe mais  j'ai du mal avec la structure de prestashop.

j'ai rajouter le script javas script dans le custom.js du theme 

<script>
 !function(){function e(e){var t=0;if(e.offsetParent){do t+=e.offsetTop;while(e=e.offsetParent);return t}}var t=window.addEventListener||function(e,t){window.attachEvent("on"+e,t)},o=window.removeEventListener||function(e,t,o){window.detachEvent("on"+e,t)},n={cache:[],mobileScreenSize:500,addObservers:function(){t("scroll",n.throttledLoad),t("resize",n.throttledLoad)},removeObservers:function(){o("scroll",n.throttledLoad,!1),o("resize",n.throttledLoad,!1)},throttleTimer:(new Date).getTime(),throttledLoad:function(){var e=(new Date).getTime();e-n.throttleTimer>=200&&(n.throttleTimer=e,n.loadVisibleImages())},loadVisibleImages:function(){for(var t=window.pageYOffset||document.documentElement.scrollTop,o=window.innerHeight||document.documentElement.clientHeight,r={min:t-300,max:t+o+300},i=0;i<n.cache.length;){var a=n.cache[i],c=e(a),l=a.height||0;if(c>=r.min-l&&c<=r.max){var s=a.getAttribute("data-src-mobile");a.onload=function(){this.className="lazy-loaded"},s&&screen.width<=n.mobileScreenSize?a.src=s:a.src=a.getAttribute("data-src"),a.removeAttribute("data-src"),a.removeAttribute("data-src-mobile"),n.cache.splice(i,1)}else i++}0===n.cache.length&&n.removeObservers()},init:function(){document.querySelectorAll||(document.querySelectorAll=function(e){var t=document,o=t.documentElement.firstChild,n=t.createElement("STYLE");return o.appendChild(n),t.__qsaels=[],n.styleSheet.cssText=e+"{x:expression(document.__qsaels.push(this))}",window.scrollBy(0,0),t.__qsaels}),t("load",function e(){for(var t=document.querySelectorAll("img[data-src]"),r=0;r<t.length;r++){var i=t[r];n.cache.push(i)}n.addObservers(),n.loadVisibleImages(),o("load",e,!1)})}};n.init()}();
</script>

Edited April 19, 2019 by mikka66 (see edit history)