Lazyload

Easily apply lazyload to images with transitions on <picture> elements

Please note: This component requires the Sass file /assets/styles/sass/core/js/_lazyload.scss

This currently works with the latest version of FatStack (we'll work on a WordPress implementation soon). For a fade effect it requires a parent element.

Usage

Lazyload provides a simple way to speed up web pages by adding the bulk of image loading to JavaScript and only when the image is near the viewport. You just need some specific markup for your images to get it working.

HTML

<picture class="f-lazyload-image">
	<source srcset="https://picsum.photos/60/30?image=15&amp;blur" data-f-src="https://picsum.photos/1200/600?image=15" media="(min-width: 1220px)">
	<source srcset="https://picsum.photos/80/40?image=15&amp;blur" data-f-src="https://picsum.photos/800/400?image=15" media="(min-width: 768px)">
	<img src="https://picsum.photos/40/80/?image=15&amp;blur" data-f-src="https://picsum.photos/400/800/?image=15" class="f-width-1-1" alt="">
</picture>

Example

Background Image

The <picture> tag should really be used for big background images for sections of a webpage because it allows the same efficiency of loading a small image with the page and then replacing it with the full size image when the page nears the section and the image has loaded fully.

HTML

<section class="f-lazyload-background f-flex example" style="height: 500px">
	<picture class="f-lazyload-cover f-lazyload-image">
		<img src="https://picsum.photos/60/30?image=90&amp;blur" data-f-src="https://picsum.photos/1000/500?image=90" alt="">
	</picture>
	<div class="f-flex f-flex-middle f-flex-center f-flex-column example-text">
		<h2>Hello</h2>
		<p>Some text</p>
	</div>
</section>

Example

Hello

Some text