CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Home > CodeDigest >  
Technologies
 


Lazy Loading Images in Asp.Net Webpage using jQuery
Submitted By Satheesh Babu B
On 5/7/2009 6:35:20 AM
Tags: CodeDigest,jQuery  

Lazy Loading Images in Asp.Net Webpage using jQuery

When we have a page with lengthy content and many larger images, it will be better if we load the images that are currently visible on the page and load the other images only if the user scrolls to that position. This will render the page faster when compared to rendering all the images initially.
To do this, there is a jQuery plug-in called Lazyloader which will delay the loading of the images that is out of our visibility and loads it only if the users scrolls to that position.

Take a look at www.ibnlive.com

 

Download the plug-in from here,
http://www.appelsiini.net/projects/lazyload

 

Download the latest jQuery library from jQuery.com and include the reference to the jQuery library file in your ASPX page.

 

<head runat="server">
<title></title>
<script src="_scripts/jquery-1[1].3.2.js" type="text/javascript"></script>
<script src="_scripts/jquery.lazyload.mini.js" type="text/javascript"></script>
<script language="javascript">
$(function() {
$("img").lazyload();
});

</script>

</head>

Recent Codes
  • View All Codes..