Get started with lazysizes CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with lazysizes CDN - cdnhub.io</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.cdnhub.io/lazysizes/5.3.2/lazysizes.min.js" async></script>
</head>
<body>
    <img data-src="image1.jpg" class="lazyload" alt="Image 1">
    <img data-src="image2.jpg" class="lazyload" alt="Image 2">
    <img data-src="image3.jpg" class="lazyload" alt="Image 3">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            if ("IntersectionObserver" in window) {
                let lazyImages = document.querySelectorAll(".lazyload");
                let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            lazyImage.src = lazyImage.dataset.src;
                            lazyImage.classList.remove("lazyload");
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });
                lazyImages.forEach(function(lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            }
        });
    </script>
</body>
</html>

https://cdn.cdnhub.io/lazysizes/5.3.2/lazysizes-umd.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/lazysizes-umd.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/lazysizes.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/lazysizes.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/artdirect/ls.artdirect.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/artdirect/ls.artdirect.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/aspectratio/ls.aspectratio.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/aspectratio/ls.aspectratio.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/attrchange/ls.attrchange.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/attrchange/ls.attrchange.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/bgset/ls.bgset.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/bgset/ls.bgset.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/blur-up/ls.blur-up.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/blur-up/ls.blur-up.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/custommedia/ls.custommedia.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/custommedia/ls.custommedia.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/fix-edge-h-descriptor/ls.fix-edge-h-descriptor.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/fix-edge-h-descriptor/ls.fix-edge-h-descriptor.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/fix-ios-sizes/fix-ios-sizes.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/fix-ios-sizes/fix-ios-sizes.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/include/ls.include.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/include/ls.include.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/native-loading/ls.native-loading.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/native-loading/ls.native-loading.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/noscript/ls.noscript.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/noscript/ls.noscript.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/object-fit/ls.object-fit.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/object-fit/ls.object-fit.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/optimumx/ls.optimumx.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/optimumx/ls.optimumx.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/parent-fit/ls.parent-fit.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/parent-fit/ls.parent-fit.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/print/ls.print.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/print/ls.print.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/progressive/ls.progressive.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/progressive/ls.progressive.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/respimg/ls.respimg.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/respimg/ls.respimg.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/rias/ls.rias.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/rias/ls.rias.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/static-gecko-picture/ls.static-gecko-picture.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/static-gecko-picture/ls.static-gecko-picture.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/twitter/ls.twitter.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/twitter/ls.twitter.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/unload/ls.unload.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/unload/ls.unload.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/unveilhooks/ls.unveilhooks.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/unveilhooks/ls.unveilhooks.min.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/video-embed/ls.video-embed.js Copied!

https://cdn.cdnhub.io/lazysizes/5.3.2/plugins/video-embed/ls.video-embed.min.js Copied!

Get started with lazysizes CDN

Stable version

How to start using lazysizes CDN

All versions