Lazy loading images là thu?t ng? v? th? thu?t ch? load hình ?nh khi c?n dùng ??n chúng, vi?c này s? giúp gi?m th?i gian load, t?ng tr?i nghi?m ng??i dùng.
B?n ch?t c?a Lazy loading images
V? c? b?n thì Lazy loading images là m?o ng?n ch?n trình duy?t load images b?ng cách xóa thu?c tính src c?a images, thay vào ?ó chúng ta s? dùng thu?c tính khác ?? ch?a link img, ví d?: data-src. Sau ?ó chúng ta s? b?t s? ki?n khi c?n load image và ??a link image tr? l?i thu?c tính src
Ví d? Lazy loading images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Load Image</title>
<style>
img {
min-height: 300px;
display: block;
}
</style>
</head>
<body>
<img src="https://picsum.photos/720/405?random=1" />
<img src="https://picsum.photos/720/405?random=2" />
<img src="https://picsum.photos/720/405?random=3" />
<img class="lazy" data-src="https://picsum.photos/720/405?random=4" />
<img class="lazy" data-src="https://picsum.photos/720/405?random=5" />
<img class="lazy" data-src="https://picsum.photos/720/405?random=6" />
<img class="lazy" data-src="https://picsum.photos/720/405?random=7" />
<img class="lazy" data-src="https://picsum.photos/720/405?random=8" />
<img class="lazy" data-src="https://picsum.photos/720/405?random=9" />
<img class="lazy" data-src="https://picsum.photos/720/405?random=10" />
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img.lazy");
var lazyloadThrottleTimeout;
function lazyload ()
{
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
</script>
</body>
</html>Lazy loading images dùng jquery plugin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy load image using jquery plugin</title>
<style>
img {
min-height: 300px;
display: block;
}
</style>
</head>
<body>
<img src="https://picsum.photos/720/405?random=1" />
<img src="https://picsum.photos/720/405?random=2" />
<img src="https://picsum.photos/720/405?random=3" />
<img class="lazy" data-original="https://picsum.photos/720/405?random=4" />
<img class="lazy" data-original="https://picsum.photos/720/405?random=5" />
<img class="lazy" data-original="https://picsum.photos/720/405?random=6" />
<img class="lazy" data-original="https://picsum.photos/720/405?random=7" />
<img class="lazy" data-original="https://picsum.photos/720/405?random=8" />
<img class="lazy" data-original="https://picsum.photos/720/405?random=9" />
<img class="lazy" data-original="https://picsum.photos/720/405?random=10" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script>
$("img.lazy").lazyload({
effect : "fadeIn"
});
</script>
</body>
</html>
Ad gi?i thích và ??a ví d? r?t d? hi?u d? áp d?ng 😀 thanks