progressive-image-load

Medium style image load. From blur to normal

Usage no npm install needed!

<script type="module">
  import progressiveImageLoad from 'https://cdn.skypack.dev/progressive-image-load';
</script>

README

Progressive image load

GitHub issues GitHub

npm i progressive-image-load --save

JS

Import js

import ProgressiveImageLoad from 'progressive-image-load';

window.onload = ProgressiveImageLoad();

HTML

<script>
    const ProgressiveImageLoad = require('progressive-image-load');
    window.onload = ProgressiveImageLoad();
</script>

CSS

Import scss

@import '~/progressive-image-load/scss/progressiveimageload';

HTML

<section class="blur-image-load" data-large="big-image.jpg">
    <img src="small-image.jpg" class="blur-image"/>
    <div style="padding-bottom:66,7%"></div>
</section>