CODEDIGEST
Home » CodeDigest
Search
 

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>

Do you have a working code that can be used by anyone? Submit it here. It may help someone in the community!!

Recent Codes
  • View All Codes..