# 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