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
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
A voir également:
- Chargement progressif IMAGE
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Google recherche par image - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Image - Guide
3 réponses
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
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>
<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>
Utilisateur anonyme
4 déc. 2014 à 21:18
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.
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...
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...
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...
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
5 déc. 2014 à 10:56
Bonjour
J'ai ta réponse
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
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
