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)"

<iframe> example

<video> example

video courtesy of Big Buck Bunny.

normal video example