{

bLazy.js for lazy load images, videos,iframes


In this blog post, We are going to learn the blazyJS javascript library for loading images.

bLazy.js Lightweight javascript framework for lazy load images

bLazy.js introduction

For any web application, Page loading is an important factor for better user experience as well as SEO point of view. On any web page, if any elements or objects like images, videos, or any HTML element are taking a long time, It will affect the overall page speed of an application.

BlazyJs is an open-source javascript framework that loads the elements lazily. instead of eagerly during page loads. Lazy loading works asynchronously meaning, It loads the elements after the main page is loaded completely This framework will solve the following issues.

Features and advantages

  • Asynchronous loading of images or any elements
  • Serve images based on screen width - Small screens get different images than web images
  • It is a simple library and its size is 2kb
  • There is no Jquery dependency
  • It reduces server bandwidth and overall improves page loading times
  • It works on all latest and old browsers
  • Provided NPM and CDN scripts
  • It supports all types of images including background images
  • Lazy load all the HTML elements that use src attributes like iframe, video, audio, and games

Installation and Usage on HTML application

There are various ways we can integrate Blazyjs into web applications.

Including CDN script to Jquery and javascript based web pages

The script can be downloaded 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 an npm package. So you can use npm or bower tools to install into your application.

npm install blazy --save
bower install blazy --save

Initialize and load blazy objects

First, We need to create a Blazy object in the script tag of an HTML page.


var bLazy = new Blazy({
  //options here
});

Options Container - this option enables to loading of the images inside the scrolling container success callback- this callback will be loaded once successfully loaded images lazily selector - This is jquery selector kind of syntax. To load all images, Please use img as the value for this option.

Examples Usage

How to lazy load images on an HTML page with examples

The image will be displayed on the HTML page using the 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 asynchronously.

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

How to lazy load background images on an HTML page

Instead of an img tag, Use a 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 the following things.

  • How to lazy load iframe in html page - using b-lazy css style
  • How to lazy load 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'
}]
});

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.