Chargement progressif des images en Javascript

Apprendre à gérer et créer un site internet, choix du CMS, des Plugins, Templates Responsive, Refonte... Réalisez votre site vitrine ou boutique E-commerce, solutions de paiement en ligne, conseils, techniques et astuces de Webmasters. Créer un site Web devient plus simple ici !

Créer une réponse à ce sujet

Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers

partagepartagepartage
Il y a 2 messages dans cette section.
Page 1 sur 1
Créer un nouveau Sujet sur le Forum

Chargement progressif des images en Javascript

Message :N°1  Message

par
» Mer 16 Nov 2016 23:04

Voici un bon moyen charger plus rapidement une page web qui contient beaucoup d'images : Vous devez être inscrit et présenté pour voir les liens ainsi que d'autres éléments qui peuvent être caché aux invités. :super:

vous avez juste à mettre vos images sous ce format :

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


et inclure ce code javascript en bas de page :
Code: Tout sélectionner
<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>
  • 0

Avatar de l’utilisateur
GHS Team
 
Messages: 5118
Inscription: Dim 22 Déc 2013 16:17
Localisation: Europe & Asie
Réputation: 1205
Récompenses: 12
Membre Contributeur (1) Protecteur de GHS Tools (1) Membre Financeur (1) + 100 Posts sur le Forum (1) + 200 Posts sur le Forum (1) Le meilleur Posteur (1) Traducteur (Anglais / Chinois) (1) Rédaction & Correction FR (1) Traducteur (Français /Anglais) (1) Développeur WEB (1)

Re: Chargement progressif des images en Javascript

Message :N°2  Message

par
» Jeu 17 Nov 2016 00:46

Merci bien Nicolaseo
Vraiment utile pour les images de 2000px pour les grands slides des pages d'accueils :)
  • 0

Avatar de l’utilisateur
GHS Team
 
Messages: 601
Inscription: Mar 19 Mai 2015 08:30
Localisation: Seine et Marne
Réputation: 281
Récompenses: 6
Membre Contributeur (1) Protecteur de GHS Tools (1) + 100 Posts sur le Forum (1) + 200 Posts sur le Forum (1) Développeur WEB (1) Webmastering (1)


Répondre à ce sujet du Forum

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 186 invités

Retourner vers Création de site Web & Webmastering