JSFiddle - React, Tailwind, and code Playground

by Hiramoto Makiko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script src="http://cly7796.net/wp/sample/plugin-jquery-lazyload/jquery.lazyload.min.js"></script>
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">
<img data-original="https://picsum.photos/200/300/?random" width="200" height="300" alt="">

CSS

img {
  display:block;
  margin:5px auto;
  width:200px;
  height:200px;
  background-color:#ccc;
}

JavaScript

$(function() {
  $('img').lazyload({
      event: 'click'
  });
});