Lozad.js - Performant Lazy Loading Library

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Image 7

Image 8

Image 9

Image 10

Image 11

Image 12

<picture> example

* You can open your network section in dev tools, for see how images are loading

Example 1

picture-01.jpg media="(min-width: 1280px)"
picture-02.jpg media="(min-width: 980px)"
picture-03.jpg media="(min-width: 320px)"

Example 2

picture-04.jpg media="(min-width: 1280px)"
picture-05.jpg media="(min-width: 980px)"
picture-06.jpg media="(min-width: 320px)"

Example 3

picture-07.jpg media="(min-width: 1280px)"
picture-08.jpg media="(min-width: 980px)"
picture-09.jpg media="(min-width: 320px)"

<background> example

* You can open your network section in dev tools, for see how background-images are loading

Example 1

Single Background Image

Example 2

Multiple Background Images
Check the console to see that these are indeed separate images.

Example 3

Multiple Background Images
Fallback Method ( where the first / foremost image fails )
Check the console to see that the first image is failed to load.

Example 4

Responsive Background Images set
Change a device pixel ratio with devtools and check the console to see which image dimension was loaded

<iframe> example

<video> example

video courtesy of Big Buck Bunny.

normal video example