<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%;
  }
}

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);