JSFiddle - React, Tailwind, and code Playground

by Chronos90

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.4/jquery.lazy.plugins.min.js"></script>
<picture data-src="https://dummyimage.com/200x100/f00/fff.png">
  <data-src srcset="
    https://dummyimage.com/200x100/0f0/fff.png 1x, 
    https://dummyimage.com/200x100/0f0/fff.png 2x" 
    media="(min-width: 551px)" type="image/jpeg">
  
  <data-src srcset="
    https://dummyimage.com/200x100/f0f/fff.png 1x, 
    https://dummyimage.com/200x100/f0f/fff.png 2x" 
    media="(max-width: 550px)" type="image/jpeg">
  
</picture>

CSS

picture {
  /* for fade in */
  opacity: 0;
  -webkit-transition: opacity 2s;
     -moz-transition: opacity 2s;
          transition: opacity 2s;

  /* for demo */
  display: block;
  margin-bottom: 300px;
  min-height: 100px;
}

JavaScript

$('picture').Lazy({
  // for demo
  scrollDirection: 'vertical',
  effectTime: 1000,
  visibleOnly: true,
  threshold: 0,
  afterLoad: function(elem) {
    // fade in
    elem.css('opacity', 1);
  }
});