Lazy Load Images Using JavaScript PHP
In this tutorial we are going to see how to implement Lazy Load Images Using JavaScript in PHP project. For example your site home page has hundred of images, then your site user might wait longer time to see your home page. It will create bad impression and hence user will leave the site. In your avoid that we need load less number of image when page loads at first time. To load less number of images that are in the viewport we going to implement lazy load.
Lazy Load Images using JavaScript:
Lazy Load will not load images that are in outside of viewport. So when user scrolls down the images in outside of viewport will be loaded gradually.
Advantages:
1. It will increases page loading speed. Because it will load only images that are in the viewport, not the all the images.
2. It greatly improves user experience.
3. Google provide importance pages that are loading faster.
4. This JavaScript is light weight and doesn’t require any additional JavaScript library like jQuery. so it will improves the page loading speed.
Here we are going to use blazy lightweight JavaScript Lazy load Images Library. This blazy lightweight JavaScript library is completely written in JavaScript, So it doesn’t depends on any third party library like jQuery.
Step 1: Create index.html File and add Basic HTML Markup in it:
First create new project named lazy-load in your htdocs/www folder. Then create index.html file and add the following basic HTML markup in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="muni">
<link rel="icon" href="../../favicon.ico">
<title>Lazy Load Images Using JavaScript PHP</title>
</head>
<body>
</body>
</html>
Step 2:Include blazy lightweight JavaScript Library:
Now include the lazy load blazy JavaScript library before end of the body tag that’s downloaded from the following link (Blazy Lightweight JavaScript Library for Lazy Load Images).
<script src="js/blazy.js"></script>
Step 2:Add Images and Initialize Lazy Load:
Now add list of images that you want display in your page, but you need to do following things within the img tag in order to initialize the Lazy load.
- First add following class to the all the images “b-lazy”
- Optionally add the placeholder image to the image src. It’s base64 encoded transparent gif so it won’t do any extra requests.
- Finally Save the real image source in the data-src attribute
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/1.jpg"
alt="Image 1"/>
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/2.jpg"
alt="Image 2" />
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/3.jpg"
alt="Image 3"/>
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/4.jpg"
alt="Image 4"/>
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/5.jpg"
alt="Image 5" />
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/6.jpg"
alt="Image 6" />
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/7.jpg"
alt="Image 7" />
Finally initialize lazy load JavaScript library in order to lazy load of images need to work. Now copy and paste the following script before end of the body tag.
<script>
;(function() {
// Initialize
var bLazy = new Blazy();
})();
</script>
Load your pages it will load much faster than previously. In coming tutorial I will post how to apply lazy load to the horizontal and vertical scroll container.
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
