TerribleDev/LazyLoadExample
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
tparnell
2019-05-23 11:26:46 -04:00
commit d51f3ae0d0
4 changed files with 52 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Readme.md Normal file
View File

@@ -0,0 +1,3 @@
## Lazy loading images
A simple example of lazy loading images

BIN
car.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

14
index.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HI</title>
</head>
<body>
<H1>Image</H1>
<img data-src="car.png" class="lazy" />
<script src="lazyLoad.js"></script>
</body>
</html>

35
lazyLoad.js Normal file
View File

@@ -0,0 +1,35 @@
if(window.IntersectionObserver) {
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll(".lazy"));
var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var lazyImage = entry.target;
if(lazyImage.dataset.src) {
lazyImage.src = lazyImage.dataset.src;
}
if(lazyImage.dataset.srcset) {
lazyImage.srcset = lazyImage.dataset.srcset;
}
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
});
} else {
var lazyImages = [].slice.call(document.querySelectorAll(".lazy"));
lazyImages.forEach(function(image) {
if(image.dataset.srcset) {
image.srcset = image.dataset.srcset;
}
if(image.dataset.src) {
image.src = image.dataset.src;
}
});
}