blazy.js - lazyload examples

# blazy.js

Blazy is a fast, SEO friendly and small but still feature-rich lazy load script. It was originally build for lazy loading images but it can also lazy load any element with a source attribute like iframes, unity games, html5 videos, scripts etc.

Blazy comes with a bunch of features like serving retina images for retina screens, multi-serve images depending on screensize and error handling. For a list of all features and more details you can visit the blog post. Blazy works in all modern browsers including IE7+.

## How to lazyload

1. Add blazy.js to your website
2. Add the 'b-lazy' class to the elements that should be lazy loaded
3. Initialize blazy whenever you're ready

           var bLazy = new Blazy({
               // Options
           });

## Examples

1. Lazy load images, regular, retina, srcset and picture element
2. Lazy load background image
3. Lazy load inside container (vertical & horizotal)
4. Lazy load iframe
5. Lazy load HTML5 video
6. Lazy load script file

## 1.1: Default lazyload image example

        <img class="b-lazy" data-src="image.jpg" />

## 1.2: Lazy load image example with css effect

      CSS:

        .b-lazy {
           opacity:0;
           transform: scale(3);
           transition: all 500ms;
        }
        .b-loaded {
           opacity:1;
           transform: scale(1);
        }

## 1.3: Lazy load image example with low res image placeholder

        <img class="b-lazy" src="low-res-image.jpg" data-src="image.jpg" />

## 1.4: Lazy load image example with srcset

       <img class="b-lazy"
            sizes="100vw"
            data-srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
            data-src="medium.jpg" />

## 1.5: Lazy load image example with picture element

        <picture>
            <source
                 media="(min-width: 650px)"
                 data-srcset="image-650.jpg" />
            <source
                 media="(min-width: 465px)"
                 data-srcset="image-465.jpg" />
            <img class="b-lazy"
                 data-src="default.jpg" />
        </picture>

## 1.6: Lazyload image with retina support example

        <img class="b-lazy" data-src="image.jpg|retina-image.jpg" />

## 2: Lazy load background image example

        <div class="b-lazy" data-src="image.jpg"></div>

## 3.1: Horizontal lazyload inside container example

        var blazy = new Blazy({
    	container: '.container'
        });

## 3.2: Vertical lazyload inside container example

        var blazy = new Blazy({
    	container: '.container'
        });

## 4: Lazy load iframe example

        <iframe class="b-lazy"
    	    data-src="https://www.youtube.com/embed/uKtjVQ5IJOQ"
    	    frameborder="0"
    	    allowfullscreen>
        </iframe>

## 5.1: Lazy load HTML5 video example

        <video class="b-lazy" data-src="video.mp4" controls></video>

## 5.2: Lazy load HTML5 video advanced example

Your browser doesn't support HTML5 video tag.

        <video class="b-lazy" controls>
            <source data-src="video.mp4" type="video/mp4">
            <source data-src="video.webm" type="video/webm">
            Your browser doesn't support HTML5 video tag.
        </video>

## 6: Lazy load script example

Check the console log

        <script class="b-lazy" data-src="script.js" async></script>