Ленивая загрузка изображений
Ленивая загрузка изображений — это техника оптимизации загрузки веб-страниц, при которой изображения загружаются только когда они видимы на экране пользователя, вместо того, чтобы загружать все изображения сразу при открытии страницы.
Пример: У вас есть длинная веб-страница с большим количеством изображений. Вместо того, чтобы все изображения загружались сразу, они будут загружаться по мере прокрутки страницы.
При исходной загрузке страницы только изображения, которые видны в начале страницы, будут загружены сразу. Когда пользователь прокручивает страницу дальше, новые изображения начинают загружаться по мере их появления в видимой области.
Таким образом, ленивая загрузка изображений помогает сократить время загрузки страницы и улучшить производительность, особенно если страница содержит много больших изображений.
HTML:
<div class="gallery">
<img src="i/cat_01.jpg" alt="Image 1" width="800" height="600" loading="lazy" >
<img src="i/cat_02.jpg" alt="Image 2" width="800" height="600" loading="lazy" >
<img src="i/cat_03.jpg" alt="Image 3" width="800" height="600" loading="lazy" >
<img src="i/cat_04.jpg" alt="Image 4" width="800" height="600" loading="lazy" >
.....
<img src="i/cat_20.jpg" alt="Image width="800" height="600" loading="lazy" >
</div>
.......
Также можно подключить и JavaScript:
HTML:
<img class="lazyload" data-src="путь_к_изображению.jpg" alt="Описание изображения">
JavaScript:
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll(".lazyload");
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('lazyload');
}
});
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);
});
CSS:
.lazyload {
opacity: 0;
transition: opacity 300ms;
}
.lazyload.loaded {
opacity: 1;
}
CSS:
.lazyload {
opacity: 0;
transition: opacity 300ms;
}
.lazyload.loaded {
opacity: 1;
}
Вы можете использовать этот код в своем проекте. Он будет загружать изображения только когда они появятся на экране пользователя, что поможет улучшить производительность и ускорить загрузку страницы.