Get started with vanilla-lazyload CDN
MIT licensed
Vanilla-lazyload is a lightweight library for lazy loading images without using external dependencies.
Tags:- lazyload
- vanilla
- responsive
- images
- picture
- srcset
- SEO
- intersectionObserver
- sizes
- progressive
- performance
- perfmatters
- async
- no-jquery
Stable version
Copied!
How to start using vanilla-lazyload CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with vanilla-lazyload CDN - cdnhub.io</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.cdnhub.io/vanilla-lazyload/17.8.8/lazyload.min.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const lazyImages = document.querySelectorAll('img.lazy');
if ('IntersectionObserver' in window) {
const lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
</script>
</head>
<body>
<header>
<h1>Lazy Loading Example</h1>
</header>
<main>
<p>Scroll down to see the lazy loaded images.</p>
<img src="placeholder.jpg" class="lazy" data-src="image1.jpg" alt="Image 1" width="300" height="200">
<img src="placeholder.jpg" class="lazy" data-src="image2.jpg" alt="Image 2" width="300" height="200">
<img src="placeholder.jpg" class="lazy" data-src="image3.jpg" alt="Image 3" width="300" height="200">
</main>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
All versions
1.0.0
1.1.0
1.2.0
1.2.1
1.3.0
1.3.1
1.4.0
1.4.1
1.4.2
1.5.0
1.5.1
1.5.3
1.5.5
1.5.6
1.5.7
1.5.8
1.5.9
1.6.0
10.0.0
10.0.1
10.1
10.1.0
10.10.0
10.11.0
10.11.1
10.12.0
10.13.0
10.14.0
10.15.0
10.16.0
10.16.0-beta
10.16.1
10.16.2
10.17.0
10.18.0
10.19.0
10.19.1
10.2.0
10.20.0
10.20.1
10.3.0
10.3.1
10.3.2
10.3.3
10.3.4
10.3.5
10.3.6
10.4.0
10.4.1
10.4.2
10.5.0
10.5.1
10.5.2
10.6.0
10.7.0
10.8.0
10.9.0
11.0.0
11.0.1
11.0.2
11.0.3
11.0.4
11.0.5
11.0.6
12.0.0
12.0.0-beta.0
12.0.1
12.0.2
12.0.3
12.1.0
12.1.1
12.2.0
12.3.0
12.4.0
12.5.0
12.5.1
13.0.0
13.0.1
14.0.0
14.0.1
15.0.0
15.1.0
15.1.1
15.2.0
16.0.0
16.1.0
17.0.0
17.0.1
17.1.0
17.1.1
17.1.2
17.1.3
17.2.0
17.3.0
17.3.1
17.3.2
17.4.0
17.5.0
17.5.1
17.6.0
17.6.1
17.7.0
17.8.1
17.8.2
17.8.3
17.8.4
17.8.5
17.8.8
17.9.0
18.0.0
19.0.0
19.0.1
19.0.3
19.0.4
19.0.5
19.1.0
19.1.1
19.1.2
*** 19.1.3
2.0.0
2.1.1
2.1.2
3.0.0
4.0.0
4.0.1
4.0.2
4.0.3
4.0.4
4.1.0
5.0.0
5.1.0
5.1.1
6.0.0
6.1.0
6.1.1
6.1.2
6.2.0
6.2.1
6.3.0
6.3.1
6.3.2
7.0.0
7.0.1
7.1.0
7.2.0
7.2.1
7.2.2
8.0.0
8.0.1
8.0.2
8.0.3
8.1.0
8.10.0
8.11.0
8.12.0
8.13.0
8.14.0
8.15.0
8.15.1
8.15.2
8.16.0
8.17.0
8.2.0
8.2.1
8.5.0
8.5.1
8.5.2
8.6.0
8.7.0
8.7.1
8.8.0
8.9.0
9.0.0
9.0.1