1.2 KiB
1.2 KiB
The onscroll handler should check which images are visible and show them.
We also want to run it when the page loads, to detect immediately visible images and load them.
The code should execute when the document is loaded, so that it has access to its content.
Or put it at the <body> bottom:
// ...the page content is above...
function isVisible(elem) {
let coords = elem.getBoundingClientRect();
let windowHeight = document.documentElement.clientHeight;
// top elem edge is visible?
let topVisible = coords.top > 0 && coords.top < windowHeight;
// bottom elem edge is visible?
let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
return topVisible || bottomVisible;
}
The showVisible() function uses the visibility check, implemented by isVisible(), to load visible images:
function showVisible() {
for (let img of document.querySelectorAll('img')) {
let realSrc = img.dataset.src;
if (!realSrc) continue;
if (isVisible(img)) {
img.src = realSrc;
img.dataset.src = '';
}
}
}
*!*
showVisible();
window.onscroll = showVisible;
*/!*
P.S. The solution also has a variant of isVisible that "preloads" images that are within 1 page above/below the current document scroll.