Chargement progressif IMAGE

Fermé

Utilisateur anonyme - 4 déc. 2014 à 15:10
DerkoFR Messages postés 504 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 5 janvier 2017 - 5 déc. 2014 à 10:56

Bonjour,

Après plusieurs recherche sur internet, j'ai trouvé une méthode pour avoir un chargement progressif sur mon site photographique.
Plusieurs tutoriels sont en ligne : Un chargement progressif en JavaScript (Lazy-load)

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

En utilisant cette méthode, je perds en référencement (src="/images/blank.gif") Ce que je trouve vraiment problématique....

Quelqu'un connait-il une autre méthode ?

Merci d'avance

A voir également:

Chargement progressif IMAGE
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Faststone image viewer - Télécharger - Visionnage & Diaporama
Image iso windows 10 - Guide
Comment agrandir une image - Guide

3 réponses

Réponse 1 / 3

DerkoFR Messages postés 504 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 5 janvier 2017 74
4 déc. 2014 à 17:11

Tu a ajouter une balise script ?

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

Réponse 2 / 3

Utilisateur anonyme
4 déc. 2014 à 21:18

Oui oui,
Mais dans ce code, j'utilise le data-src ce qui à pour cause de perdre en référencement.

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

En fouillant un peu, j'ai trouvé un site qui n'utilise pas le data-src et le chargement marche très bien. https://grabuge.co/
Mais je ne trouve aucun tuto pour faire la même chose...

<img src="/upload/1415875253_624X394.jpg" alt="Film Pernod Ricard" class="F1 lazy" width="624" height="394" >

Je viens juste de débuter dans le web ! La solution est peut-être au bout de mon nez... Mais pas moyen de trouver une solution sans passer par data-src...

Réponse 3 / 3

DerkoFR Messages postés 504 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 5 janvier 2017 74
5 déc. 2014 à 10:56

Bonjour

J'ai ta réponse

<img src="http://img4.hostingpics.net/pics/923469espace005.gif">

Se qui donne
http://jsfiddle.net/DerkoFR/amhrg8o6/

Voila jai fait une image gif je les inserer je les fait heberger ("http://img4.hostingpics.net")

Si tu comprend pad tu peut te aider de sa
https://www.w3schools.com/html/html_images.asp

Bonne Journée

Discussions similaires