Project Lima pattern lib

Lazyload 

<div class="container-box-for-display">
    <figure class="b-lazyload" style="padding-top:100%;">
        <img class="b-lazyload__image js-lazyload" data-src="https://source.unsplash.com/400x400/?nature" data-srcset="https://source.unsplash.com/800x800/?nature 800w, https://source.unsplash.com/600x600/?nature 600w, https://source.unsplash.com/350x350/?nature 350w, https://source.unsplash.com/100x100/?nature 100w"
        />
    </figure>

    <br />

    <figure class="b-lazyload" style="padding-top:50%;">
        <img class="b-lazyload__image js-lazyload" data-src="https://source.unsplash.com/800x400/?nature" />
    </figure>

    <br />

    <figure class="b-lazyload" style="padding-top:56.25%;">
        <img class="b-lazyload__image js-lazyload" data-srcset="https://source.unsplash.com/1600x900/?nature 1600w, https://source.unsplash.com/800x450/?nature 800w, https://source.unsplash.com/400x225/?nature 400w" />
    </figure>
    <br />
</div>

<style>
    .container-box-for-display {
        width: 100%;
        max-width: 500px;
    }
</style>
 
<div class="container-box-for-display">
    <figure class="b-lazyload" style="padding-top:100%;">
        <img class="b-lazyload__image js-lazyload" data-src="https://source.unsplash.com/400x400/?nature" data-srcset="https://source.unsplash.com/800x800/?nature 800w, https://source.unsplash.com/600x600/?nature 600w, https://source.unsplash.com/350x350/?nature 350w, https://source.unsplash.com/100x100/?nature 100w" />
    </figure>

    <br />

    <figure class="b-lazyload" style="padding-top:50%;">
        <img class="b-lazyload__image js-lazyload" data-src="https://source.unsplash.com/800x400/?nature" />
    </figure>

    <br />

    <figure class="b-lazyload" style="padding-top:56.25%;">
        <img class="b-lazyload__image js-lazyload" data-srcset="https://source.unsplash.com/1600x900/?nature 1600w, https://source.unsplash.com/800x450/?nature 800w, https://source.unsplash.com/400x225/?nature 400w" />
    </figure>
    <br />
</div>

<style>
    .container-box-for-display {
        width:100%;
        max-width: 500px;
    }
</style>
 
/* No context defined for this component. */

NOTE: .container-box-for-display element is only here for display purposes only, you do not need it when using lima in your builds.

This component, as named, lazyloads images (with javascript) when scrolling based on the intersection observer (encase the user has JS turned off, it is suggested that you include a normal image in a noscript tag. For an example of this view Bryen langley or Roger Pope).

To get this component to work, you will need to wrap an image in a div/figure etc with the class b-lazyload. For the image, you will need to add the classes b-lazyload__image (which gives it styles) and js-lazyload (which initialises the js).

While the image is loading it will have no height or width, because of this it can cause a “jolt” after becoming visible. To combat this, the image is positioned absolute to its container and it spans 100% height and width, then with the height and width of the orignal image we can work out the aspect ratio (which we supply as padding-top to the container). If you are using Craft then you can get this information from the cms, and add the style inline in the template, if you are going to add it as a style in the scss then there is a function to automatically work this out: aspect-ratio($width, $height).

Putting the images into an actual container allows for greater control and also allows for easier lazyload styling effects i.e. IWSC 2019 redesign.