How to load images lazy in javascript|blazyjs tutorial examples

How to load images lazy in javascript|blazyjs tutorial examples

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

What is bLazy JS?

bLazy.js is a javascript library used to load images lazily. It loads the images, videos, and HTML Elements asynchronously, and improves the page load time. Due to this, pages are benefitted from SEO and better user experience.

bLazy.js introduction

For any web application, Page loading is an important factor for better user experience as well as an 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.

bLazy.js 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

How to integrate bLazy.js into the application

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

Download bLazy.js CDN script to Jquery and javascript-based web apps

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>

blazy NPM Package install for node-based applications

It provides an npm package. So you can use npm or bower tools to install it 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 a jquery selector kind of syntax. To load all images, Please use img as the value for this option.

BlazyJS Examples

Below are a list of examples using blazyjs in node and javascript applications

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 the img tag, add class=“.b-lazy” CSS style to the img tag Provide the image url in the 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 an 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 example explains 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' }] });

Is lazy loading good?

The lazy loading of HTML elements such as images, and videos are good. During page rendering, Images are deferred and loaded asynchronously. Due to this, SEO improves and User experiences are good.

Is Lazyload good for SEO?

The lazy loading technic is a good SEO solution. This page is ranked better and improves User Experiences and better conversion rate