Tuesday, October 9, 2018

bLazy.js Lightweight javascript framework for lazy load images, videos,iframes

In this blog post, We are going to learn blazyJS javascript library for loading images.
bLazy.js Lightweight javascript framework for lazy load images

bLazy.js introduction

For any webapplication, Page loading is important factor for better use experience as well as SEO point of view. On any web apage, if any elements or objects like images, or videos  or any HTML element is taking longer time, It will affect the overal page speed of a applicaiton. Blazy Js is a opensource javascript framework that load sthe elements  lazily. instead of eagerly during page loads. Lazy loading works asynchronusly meaning, It loads the elements after the main page is loaded completely This framework will solve the following issues.

Features and advantages

  • Asynchronus loading of images or any elements
  • Serve images based on screen width - Small screen get different images than web images
  • It is simple library and size is 2kb 
  • There is no Jquery dependency
  • It reduces server  bandwidth and overall improve page loading times
  • It works on all latest and old browsers
  • Provided NPM and CDN scripts 
  • It support all types of images including background images 
  • Lazy load all the html elmeents thats use src attbutes like iframe,video,audio, and games

Installation and Usage on html application

There are various ways we can integrate Blazyjs in web application

Including CDN script to Jquery and javascrip based web pages

Script can be download from here or you can include cdn as below
<script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.8.2/blazy.min.js"></script> 

NPM Package install for node based applications 

It provides npm package. So you can use npm or bower tools to install into your application.
npm install blazy --save
bower install blazy --save

Initlize and load blazy objects 

First We need to create Blazy object in the script tag of html page

var bLazy = new Blazy({
  //options here
});
Options Container - this option enables to load the images inside scrolling container success callback- this call back will be loaded once successfully loaded images lazyily selector - This is jquery selector kind of syntax. To load all images, Please use img as value for this option.

Examples Usage

How to lazy load images in html page with examples

Image will be displayed on html page using img tag. To make image serving using img tag, add class=".b-lazy" css style to img tag Provide image url in data-src attribute to load asynchronusly
<img class="b-lazy" data-src="image-url" />

How to lazy load background iamges in html page

 Instead of img tag, Use div tag and provide css style to div and provide image url
<div class="b-lazy" data-src="image-url"></div>
The below example explains following things

  • How to lazy load iframe in html page - using b-lazy css style 
  • How to lazy l oad html5 videos 
  • How to lazy load html script 
  • How to serve multiple images lazily

// iframe lazy loading in a page
<iframe class="b-lazy" 
   data-src="video url" 
   frameborder="0" 
   allowfullscreen>
</iframe>
// lazy load videos
<video class="b-lazy" data-src="Video url" controls></video>
//  This explampl explains about how to lazy images  based on 
var bLazy = new Blazy({ 
breakpoints: [{
width: 320 
, src: 'data-src-320 image file'
}
, {
width: 1024 
, src: 'data-src-1024 image file'
}]
});

Related article


EmoticonEmoticon