as-lazy-picture-load

Component for lazy loading <picture> element.

Usage

Add lazy-load class to the <picture>, pass media url for <source> in data-srcset and data-src for the <img>. E.g.:

<picture class="frontpage-hero-banner-picture lazy-load">
	<source class="frontpage-hero-image" data-srcset="@Model.BannerDesktopImageUrlExtraSmall()" media="(max-width:480px)">
	<source class="frontpage-hero-image" data-srcset="@Model.BannerDesktopImageUrlSmall()" media="(max-width:768px)">
	<source class="frontpage-hero-image" data-srcset="@Model.BannerDesktopImageUrlMedium()" media="(max-width:1024px)">
	<source class="frontpage-hero-image" data-srcset="@Model.BannerDesktopImageUrl()" media="(max-width:1366px)">
	<source class="frontpage-hero-image" data-srcset="@Model.BannerDesktopImageUrlLarge()" media="(max-width:1920px)">
	<source class="frontpage-hero-image" data-srcset="@Model.BannerDesktopImageUrlExtraLarge()" media="(min-width:1921px)">
	<img class="frontpage-hero-image" data-src="@Model.BannerDesktopImageUrlExtraLarge()" alt="@Model.Name">
</picture>

If you would like to use a custom class appended to the <picture> after loading it, provide a data attribute data-loaded-class="your-custom-class" to <picture> (otherwise "loaded" will be appended). To use default styles - please import styles to your style.css (@import '@appstractdk/as-lazy-picture-load';).