@appstractdk/as-progressive-image v1.1.22

as-progressive-image

Component for loading images progressively.

Usage

The following HTML is needed for the progressive loading to work:

<div class="progressive-image-container" data-srcset="" data-sizes="" data-full-resolution-image="">
    <img src="" class="preview" alt="image" />
</div>

<img> sourse should contain a link to a small preview image(e.g. 20px width highly-compressed jpeg). The actual full-resolution image source should be defined under data-full-resolution-image attribute. IMPORTANT: all of the images have to have an exact same aspect ratio.

*You are also welcome to use HTML5 image srcset and sizes attributes.