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

Lazy load images example 1a 
    <img class="b-lazy" data-src="image.jpg" />

1.2: Lazy load image example with css effect

Lazy load images example 1b 
  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

Lazy load images example 1c 
    <img class="b-lazy" src="low-res-image.jpg" data-src="image.jpg" />

1.4: Lazy load image example with srcset

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

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

Lazy load images example 1a 
    <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

  • Lazy load images example 3 image 1
  • Lazy load images example 3 image 2
  • Lazy load images example 3 image 3 
    var blazy = new Blazy({
	container: '.container'
    });

3.2: Vertical lazyload inside container example

  • Lazy load images example 3 image 1
  • Lazy load images example 3 image 2
  • Lazy load images example 3 image 3 
    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

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