JSFiddle - React, Tailwind, and code Playground

by shigetak

HTML

<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script>
<div class="ui text container segment">
  <br>content<br>  <br>content<br>
  <br>content<br>  <br>content<br>
  <hr>
  <br>content<br>  <br>content<br>
  <br>content<br>  <br>content<br>

<img class="lazyload image" src="https://semantic-ui.com/images/wireframe/image.png" data-original="https://image.rakuten.co.jp/shopjapan/cabinet/storico/001splp01.jpg">

<img class="lazyload image" src="https://semantic-ui.com/images/wireframe/image.png" data-original="https://image.rakuten.co.jp/shopjapan/cabinet/storico/001splp01.jpg">

<img class="lazyload image" src="https://semantic-ui.com/images/wireframe/image.png" data-original="https://image.rakuten.co.jp/shopjapan/cabinet/storico/001splp01.jpg">

<img class="lazyload image" src="https://semantic-ui.com/images/wireframe/image.png" data-original="https://image.rakuten.co.jp/shopjapan/cabinet/storico/001splp01.jpg">

</div>

JavaScript

// Lazy Loadを起動する
$('img.lazyload.image').lazyload();