Home
User experience is very important aspect in making a web application. One of the important factors is improving your website page load time. Where do many applications fail to make good user experience ?
Lets say you have 10 good quality images for a post on a web page, each image size is of 1MB, if you try to load all images at once, it is 10MB.
Browsers will keep showing the PROCESSING/LOADING symbol on their tab which will make user to think "WHY IS IT TAKING SO LONG TIME TO LOAD ?"
To avoid such situations, you can use lazy loading for the images, with this, the web page loads first one or two images and the browser does not showing any PROCESSING symbol on the tab.
And now users expression "WOW.. IT IS SUPER FAST..!! ". As they scroll down, images will be loaded as required.
How to use it to speed up your page load time
1. Load it along with Jquery
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
2. Give a class name to the images
<img class="lazy-load" src="/path/to/image.jpg">
3. Call jquery plugin function
$(function() {
$("img.lazy-load").lazyload();
});
- Trying to load lot of content at once.
- Loading higher dimension ed images than required by your styles
- Loading images before even they actually require on the screen.
Lets say you have 10 good quality images for a post on a web page, each image size is of 1MB, if you try to load all images at once, it is 10MB.
Browsers will keep showing the PROCESSING/LOADING symbol on their tab which will make user to think "WHY IS IT TAKING SO LONG TIME TO LOAD ?"
To avoid such situations, you can use lazy loading for the images, with this, the web page loads first one or two images and the browser does not showing any PROCESSING symbol on the tab.
And now users expression "WOW.. IT IS SUPER FAST..!! ". As they scroll down, images will be loaded as required.
How to use it to speed up your page load time
1. Load it along with Jquery
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
2. Give a class name to the images
<img class="lazy-load" src="/path/to/image.jpg">
3. Call jquery plugin function
$(function() {
$("img.lazy-load").lazyload();
});