JSFiddle - React, Tailwind, and code Playground

by hyeyoon

HTML

<img src="https://picsum.photos/1200/800" alt="">
<img src="https://picsum.photos/1200/800" alt="">
<img src="https://picsum.photos/1200/800" alt="">
<img src="https://picsum.photos/1200/800" alt="">
<img src="https://picsum.photos/1200/800" alt="">
<img src="https://picsum.photos/1200/800" alt="">

JavaScript

function isInViewport(element) {
    const viewportHeight = document.documentElement.clientHeight;
    const viewportWidth = document.documentElement.clientWidth;
    const rect = element.getBoundingClientRect();

    if (!rect.width || !rect.height) {
        return false;
    }

    var top = rect.top >= 0 && rect.top < viewportHeight;
    var bottom = rect.bottom >= 0 && rect.bottom < viewportHeight;
    var left = rect.left >= 0 && rect.left < viewportWidth;
    var right = rect.right >= 0 && rect.right < viewportWidth;

    return (top || bottom) && (left || right);
}

const images = Array.from(document.querySelectorAll('img'));

document.addEventListener('scroll', () => {
    images.forEach(image => {
        if (isInViewport(image)) {
            image.onload = () => images.splice(images.indexOf(image), 1);
            image.src = 'original_image_path';
        }
    });
});