Skip to content

Latest commit

 

History

History
32 lines (24 loc) · 1.58 KB

README.md

File metadata and controls

32 lines (24 loc) · 1.58 KB
Raw

witzbould's lazyload

lazyload inspired by https://github.com/Paul-Browne/lazyestload.js

Usage

Add the class=lazyload to your HTML markup. Furthermore you must add data-src or data-srcset attributes.
The lazyloader will automaticaly atach to all img with the lazyload class and will monitor your DOM for additional images.

This lazyload library uses Intersection Observer API and MutationObserver.
You have to ensure that the targeted browsers support those!

<!-- normal img -->
<img class="lazyload" src="images/placeholders/forest-compressed.jpg" data-src="images/forest-compressed.jpg">

<!-- img with srcset -->
<img class="lazyload" src="images/placeholders/jon-grogan-compressed.jpg" data-srcset="images/500/jon-grogan-compressed.jpg 500w, images/jon-grogan-compressed.jpg, 2800w">

<!-- picture with default img -->
<picture>
	<source media="(max-width: 300px)" data-srcset="images/300/jeremy-gallman_square_smaller.jpg" />
	<source media="(max-width: 400px)" data-srcset="images/400/jeremy-gallman_square_smaller.jpg" />
	<source media="(max-width: 500px)" data-srcset="images/500/jeremy-gallman_square_smaller.jpg" />
	<source media="(min-width: 501px)" data-srcset="images/jeremy-gallman_square_smaller.jpg" />
	<img class="lazyload" src="images/placeholders/jeremy-gallman_square_smaller.jpg">
</picture>

Also have a look at the example (reused from Paul Browne's lazyestload).