Get started with jquery_lazyload CDN

MIT licensed

JQuery Lazy Load: Lightweight plugin, delays image loading until in viewport.

Tags:
  • jquery-plugin
  • ecosystem:jquery

Stable version

Copied!

How to start using jquery_lazyload CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jquery_lazyload CDN - cdnhub.io</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/jquery_lazyload/1.9.7/lazyload.min.js"></script>
    <script>
        $(document).ready(function() {
            $('img.lazy').lazyload({
                threshold: 200, // Load images when at least 200px is visible from the top
                failure_limit: 5, // Stop trying to load images if the number of failures reaches 5
                event: 'scroll' // Trigger lazy loading on scroll
            });
        });
    </script>
</head>
<body>
    <header>
        <h1>Lazy Loading Example</h1>
    </header>
    <main>
        <p>Scroll down to see how the images are loaded lazily.</p>
        <img src="placeholder.png" class="lazy" data-src="image1.jpg" alt="Image 1">
        <img src="placeholder.png" class="lazy" data-src="image2.jpg" alt="Image 2">
        <img src="placeholder.png" class="lazy" data-src="image3.jpg" alt="Image 3">
    </main>
</body>
</html>
Copied!
Copied!

All versions