Untitled

<!DOCTYPE html>
<html>

<head>

  <style>
    .intrinsic-ratio {
      position: relative;
      height: 0;
      width: 100%;
      padding-bottom: 50%;
    }
    .intrinsic-ratio img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .deferredload {
      opacity: 0;
    }
    .lazyloaded {
      opacity: 1;
      transition: opacity 800ms;
    }
  </style>
  <script>
    window.lazySizesConfig = window.lazySizesConfig || {};
    window.lazySizesConfig.expand = 80;
  </script>
  <script src="http://afarkas.github.io/lazysizes/plugins/respimg/ls.respimg.min.js" async=""></script>
  <script src="http://afarkas.github.io/lazysizes/lazysizes.min.js" async=""></script>
</head>

<body>
  <h1>Loaded after onload with a transition and has a low quality image:</h1>
  <div class="intrinsic-ratio">
    <img src="http://lorempixel.com/200/100/people/3/" data-sizes="auto" class="hero-placeholder" />
    <img src="http://lorempixel.com/200/100/people/3/" data-srcset="http://lorempixel.com/200/100/people/3/ 200w,
          http://lorempixel.com/400/200/people/3/ 400w,
          http://lorempixel.com/600/300/people/3/ 600w,
          http://lorempixel.com/800/400/people/3/ 800w,
          http://lorempixel.com/1000/500/people/3/ 1000w,
          http://lorempixel.com/1200/600/people/3/ 1200w" data-sizes="auto" class="deferredload" />
  </div>

  <h1>Loaded as soon as it comes into view and has a low quality image:</h1>
  <div class="intrinsic-ratio">
    <img src="http://lorempixel.com/400/200/people/8/" data-srcset="http://lorempixel.com/400/200/people/8/ 400w,
          http://lorempixel.com/600/300/people/8/ 600w,
          http://lorempixel.com/800/400/people/8/ 800w,
          http://lorempixel.com/1000/500/people/8/ 1000w,
          http://lorempixel.com/1200/600/people/8/ 1200w" data-sizes="auto" class="lazyload" />
  </div>

  <h1>Loaded as soon as it comes into view and has no low quality image:</h1>
  <div class="intrinsic-ratio">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="http://lorempixel.com/400/200/people/9/ 400w,
          http://lorempixel.com/600/300/people/9/ 600w,
          http://lorempixel.com/800/400/people/9/ 800w,
          http://lorempixel.com/1000/500/people/9/ 1000w,
          http://lorempixel.com/1200/600/people/9/ 1200w" data-sizes="auto" class="lazyload" />
  </div>

  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

  <script>
    $(window).on('load', function() {
      $('.deferredload').addClass('lazyload');
    });
  </script>
</body>

</html>