Blossom of April

Discussion board for a group of IT enthusiasts.


You are not connected. Please login or register

Do not make your webpage to load all images at once. Tip to speed up website

View previous topic View next topic Go down  Message [Page 1 of 1]

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 ?




  • 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();

});


View user profile

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum