<p class="text-center">↓スクロール↓</p>

<div class="container"><img data-src="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s0.jpg" data-retina="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s0.jpg" data-srcset="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s0.jpg 1600w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s0-300x200.jpg 300w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s0-768x513.jpg 768w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s0-1024x684.jpg 1024w"/></div>

<div class="container"><img data-src="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s1.jpg" data-retina="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s1.jpg" data-srcset="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s1.jpg 1600w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s1-300x200.jpg 300w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s1-768x513.jpg 768w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s1-1024x684.jpg 1024w"/></div>

<div class="container"><img data-src="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s2.jpg" data-retina="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s2.jpg" data-srcset="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s2.jpg 1600w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s2-300x200.jpg 300w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s2-768x513.jpg 768w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s2-1024x684.jpg 1024w"/></div>

<div class="container"><img data-src="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s3.jpg" data-retina="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s3.jpg" data-srcset="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s3.jpg 1600w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s3-300x200.jpg 300w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s3-768x513.jpg 768w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s3-1024x684.jpg 1024w"/></div>

<div class="container"><img data-src="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s4.jpg" data-retina="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s4.jpg" data-srcset="https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s4.jpg 1600w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s4-300x200.jpg 300w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s4-768x513.jpg 768w, https://cdn.rawgit.com/hal-satoyuki/jquery_lazyload_test/master/images/s4-1024x684.jpg 1024w"/></div>
/**
* 適当にCSS設定した
* 深い意味はない
*/
body {
  background: #f2f2f2;
}
.container {
  display: block;
  padding: 250px 64px;
  text-align: center;
}
img {
  box-sizing: border-box;
  display: inline-block;
  min-width: 100%;
  max-width: 100%;
  border: 32px solid #fff;
  transform: scale(.6);
  opacity: 0;
  transition: transform 3s ease, opacity 3s ease;
}
img.is-show {
  transform: scale(1);
  opacity: 1;
}
.text-center {
  text-align: center;
}
'use strict';
var layzr = Layzr({
    normal: 'data-src',
    retina: 'data-retina',
    srcset: 'data-srcset',threshold: -30
});

layzr.on('src:after', function (element) {
    element.classList.add('is-show');
});

document.addEventListener('DOMContentLoaded', function () {
    layzr.update().check().handlers(true);
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/layzr.js/2.0.2/layzr.min.js