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>
|