Chargement progressif des images en Javascript

Apprendre à créer et gérer des sites internet, conseils, techniques et astuces de Webmasters.

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: 4123
Inscription: Dim 22 Déc 2013 16:17
Localisation: Europe & Asie
Réputation: 135
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: 451
Inscription: Mar 19 Mai 2015 08:30
Localisation: Seine et Marne
Réputation: 108
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 2 invités

Retourner vers Création de site Web & Webmastering



 


  • Sujets similaires
    Réponses
    Vus
    Dernier message