$ npm install progressive-image-lazyload.js
$ yarn add progressive-image-lazyload.js
HTMLmarkup
<figure class="graf-figure">
<div class="aspectRatioPlaceholder">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia" data-width="1920" data-height="1080">
<img class="progressiveMedia-thumbnail" data-thumb="https://i.imgur.com/glCxppa.png" alt="progressive-image-lazyload">
<canvas class="progressiveMedia-canvas"></canvas>
<img class="progressiveMedia-image" data-src="https://i.imgur.com/o4aKBEH.png" alt="progressive-image-lazyload">
</div>
</div>
</figure>- In
HTMLput this line of code inside your<head>tag
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/progressive-image-lazyload.js@1.0.4/dist/progressive-image-lazyload.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/progressive-image-lazyload.js@1.0.4/dist/progressive-image-lazyload.js"></script>- In
JavaScriptandSCSSusing npm or yarn
/* SCSS */
@import "~progressive-image-lazyload.js/src/scss/progressive-image";/* JavaScript */
import 'progressive-image-lazyload.js'data-thumbthis is where you set your small image.data-srcthis is where you set your large image.