<div class="l-wrapper">
<div class="c-image">
<img src="https://dl.dropbox.com/s/jccysi1j36525c7/default.jpg?dl=0" data-src="https://dl.dropbox.com/s/geqpelj1pcu4f22/sample01.jpg?dl=0" class="lazyload" alt="sample01">
</div>
<div class="c-image">
<img src="https://dl.dropbox.com/s/jccysi1j36525c7/default.jpg?dl=0" data-src="https://dl.dropbox.com/s/29p4abycpwfby4d/sample02.jpg?dl=0" class="lazyload" alt="sample02">
</div>
<div class="c-image">
<img src="https://dl.dropbox.com/s/jccysi1j36525c7/default.jpg?dl=0" data-src="https://dl.dropbox.com/s/u80jzptryxja7q9/sample03.jpg?dl=0" class="lazyload" alt="sample03">
</div>
<div class="c-image">
<img src="https://dl.dropbox.com/s/jccysi1j36525c7/default.jpg?dl=0" data-src="https://dl.dropbox.com/s/5l3d94y7s7es75d/sample04.jpg?dl=0" class="lazyload" alt="sample04">
</div>
<div class="c-image">
<img src="https://dl.dropbox.com/s/jccysi1j36525c7/default.jpg?dl=0" data-src="https://dl.dropbox.com/s/8ylu1pfmn4u1nh1/sample05.jpg?dl=0" class="lazyload" alt="sample05">
</div>
</div>
.l-wrapper {
max-width: 650px;
width: 100%;
margin: 0 auto;
}
.c-image {
margin-bottom: 40px;
img {
max-width: 100%;
}
}
View Compiled
let images = document.querySelectorAll(".lazyload");
// lazyload(images, {
// rootMargin: "0px 0px 500px 0px",
// threshold: 0
// });
//codepen上だとなぜかsetTimeoutを入れないとうまく動きませんでした
//setTimeoutは無視してください
setTimeout(function() {
lazyload(images, {
rootMargin: "0px 0px 0px 0px",
threshold: 0.5
});
}, 1000);
This Pen doesn't use any external CSS resources.