Preparing for cross-browser (native) lazy loading

preparing-cross-browser-lazy-loading.html

<noscript>
    <img src="image.jpg">
</noscript>
<img data-src="image.jpg" loading="lazy">

<script>
    if ('loading' in HTMLImageElement.prototype) {
        const lazy = document.querySelectorAll('[data-src]');
        lazy.forEach(el => {
            // Turn `data-src` into `src`
            el.src = el.dataset.src;
            // Same for `data-srcset` if used
            if (el.dataset.srcset) {
                el.srcset = el.dataset.srcset;
            }
        });
    }
</script>