Last active
April 28, 2016 08:33
-
-
Save CyrilKrylatov/6019eb4188bb8c90bb1367d805479f0c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[data-imgloaded] { | |
position: relative; | |
} | |
[data-imgloaded] > img[src^=data] { | |
transform: rotate(0); | |
-webkit-filter: blur(15px); | |
filter: blur(15px); | |
} | |
[data-imgloaded] > img[src^=http] { | |
position: absolute; | |
top: 0; | |
left: 0; | |
opacity: 0; | |
} | |
[data-imgloaded="true"] > img[src^=http] { | |
opacity: 1; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Quand le DOM a fini de charger, on lance le lazy-loading | |
// sur les images qui nous intéressent. | |
// On utilise un `data-attribute`, rendez-vous à la fin de ce code | |
// pour savoir pourquoi. | |
document.addEventListener('DOMContentLoaded', function() { | |
lazyLoadImg('[data-imgloaded="false"][data-large]'); | |
}; | |
function lazyLoadImg(selector) { | |
var elements = document.querySelectorAll(selector); | |
// Merci @hugogiraudel pour cette boucle sur des éléments | |
Array.prototype.forEach.call(elements, function(el) { | |
// On créé un nouvel élément Image | |
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image | |
var imgLarge = new Image(); | |
// On lui attribue une hauteur et une largeur fixe | |
// Comme ça le navigateur sait d'avance la zone d'affichage à attribuer à l'image | |
imgLarge.width = el.offsetWidth; | |
imgLarge.height = el.offsetHeight; | |
// On récupère l'URL de notre image stockée en amont | |
imgLarge.src = el.dataset.large; | |
// Quand l'image finale a fini de charger | |
imgLarge.onload = function() { | |
// On change le `data-attribute` de l'élément. | |
// Ainsi, sur une page de catégories et son scroll infinite, | |
// À chaque fois qu'on ajoute les éléments de la page suivante | |
// à la page courante, on peut relancer le lazy-load sans | |
// que les images déjà présentes n'en soit affectées. | |
// Également, avec un peu de CSS et de bonne volonté, | |
// on affiche l'élément (opacity 0 à 1). | |
el.dataset.imgloaded = true; | |
}; | |
// On ajoute à l'élément qui englobe nos deux images | |
// l'image finale | |
el.appendChild(imgLarge); | |
}); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment