Health Design System

Image: Default 

<div class="image-outer">
    <div class="image-placeholder" style="max-width: 800px;">
        <div style="padding-top: 56.25%;"></div>
    </div>
    <div class="image-wrapper image-loading">
        <div class="image">
            <img width="800" height="450" data-src="https://picsum.photos/1600/900">
        </div>
    </div>
</div>

Lazy load

Images should be lazy loaded to improve time to interactive.

Images should use width and height attributes.

Reserving space

To make sure the page doesn’t jump around as images are loaded, we reserve the space initially.

max-width is the original image width

padding-top is calculated as a percentage of height width height / width * 100

Requires LazyLoad, jQuery and health.lazyload.js.

Image loaded event

When an image is loaded lazyLoad_loaded is fired on the image.

To listen for this event, register an event listener to the image, for example

$('img[data-src]').on('lazyLoad_loaded', function(event, element) {
  // do something
});