49 lines
1.2 KiB
Markdown
49 lines
1.2 KiB
Markdown
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:
|
|
|
|
```js
|
|
// ...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:
|
|
|
|
```js
|
|
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.
|