Загрузка видимых изображений
Допустим, у нас есть клиент с низкой скоростью соединения, и мы хотим сэкономить его трафик.
Для этого мы решили не показывать изображения сразу, а заменять их на «макеты», как тут:
<img src="/?originalUrl=https%3A%2F%2Flearn.javascript.ru%2F%26quot%3Bplaceholder.svg%26quot%3B%2520width%3D%26quot%3B128%26quot%3B%2520height%3D%26quot%3B128%26quot%3B%2520data-src%3D%26quot%3Breal.jpg%26quot%3B%26gt%3B%253C%2Fcode">То есть, изначально, все изображения – placeholder.svg. Когда страница прокручивается до того положения, где пользователь может увидеть изображение – мы меняем src на значение из data-src, и таким образом изображение загружается.
Вот пример в iframe:
Прокрутите его, чтобы увидеть загрузку изображений «по требованию».
Требования:
- При загрузке страницы те изображения, которые уже видимы, должны загружаться сразу же, не ожидая прокрутки.
- Некоторые изображения могут быть обычными, без
data-src. Код не должен касаться их. - Если изображение один раз загрузилось, оно не должно больше перезагружаться при прокрутке.
P.S. Если можете, реализуйте более продвинутое решение, которое будет загружать изображения на одну страницу ниже/после текущей позиции.
P.P.S. Достаточно обрабатывать вертикальную прокрутку, горизонтальную не требуется.
Обработчик onscroll должен проверить, какие изображения видимы, и показать их.
Мы также можем запустить его при загрузке страницы, чтобы сразу обнаружить видимые изображения и загрузить их.
Код должен выполниться, когда документ загружен, чтобы у него был доступ к его содержимому.
Можно разместить его перед закрывающим тегом </body>:
// ...содержимое страницы выше...
function isVisible(elem) {
let coords = elem.getBoundingClientRect();
let windowHeight = document.documentElement.clientHeight;
// верхний край элемента виден?
let topVisible = coords.top > 0 && coords.top < windowHeight;
// нижний край элемента виден?
let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
return topVisible || bottomVisible;
}Функция showVisible() использует проверку на видимость, реализованную в isVisible() для загрузки видимых картинок:
function showVisible() {
for (let img of document.querySelectorAll('img')) {
let realSrc="/?originalUrl=https%3A%2F%2Flearn.javascript.ru%2Fimg.dataset.src%3B%2520%2520%2520%2520if%2520(!realSrc)%2520continue%3B%2520%2520%2520%2520if%2520(isVisible(img))%2520%257B%2520%2520%2520%2520%2520%2520img.src%2520%3D%2520realSrc%3B%2520%2520%2520%2520%2520%2520img.dataset.src%2520%3D"';
}
}
}
showVisible();
window.onscroll = showVisible;P.S. В решении этой задачи есть также вариант isVisible, который предварительно загружает изображения, находящиеся в пределах одной страницы выше/ниже от текущей прокрутки документа.