В наше время когда сайты переполнены медиа контентом типа видео и картинок, очень важно чтобы страничка грузилась быстро. Для этого можно применить так званую ленивую загрузку. Как для видео так и для картинок.
Есть довольно много библиотек. Как хороший так и не очень.
Ниже представлено легкий скрипт на чистом js. Картинки или видео будут подгружаться только при прокрутке страницы к этому контенту .
Пример
<img class="lazy" data-src="files/icons/3.jpg" alt="">
Сам скрипт
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll(".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>
коммент.