preloading images using jquery

Author

Message

rajkumar

Post subject: preloading images using jquery

Posted: Wed Jun 01, 2011 4:01 am

Joined: Tue May 13, 2008 3:43 am
Posts: 213

Hi Friends,

In this post i am going to explain the jquery Image Preloader. Basically it is a script that loads images in the background and track number of loaded images. Itâ€™s very simple, only 25 lines of code, but maybe useful if you are creating jQuery image gallery or some other script that requires image preloading.

<html>

<head>
<title>bez nazwy</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.16" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">

(function($) {
var imgList = [];
$.extend({
preload: function(imgArr, option) {
var setting = $.extend({
init: function(loaded, total) {},
loaded: function(img, loaded, total) {},
loaded_all: function(loaded, total) {}
}, option);
var total = imgArr.length;
var loaded = 0;

setting.init(0, total);
for(var i in imgArr) {
imgList.push($("<img />")
.attr("src", imgArr[i])
.load(function() {
loaded++;
setting.loaded(this, loaded, total);
if(loaded == total) {
setting.loaded_all(loaded, total);
}
})
);
}

}
});
})(jQuery);

$(function() {

$.preload([
"http://farm3.static.flickr.com/2661/3792282714_90584b41d5_b.jpg",
"http://farm2.static.flickr.com/1266/1402810863_d41f360b2e_o.jpg"
], {
init: function(loaded, total) {
$("#indicator").html("Loaded: "+loaded+"/"+total);
},
loaded: function(img, loaded, total) {
$("#indicator").html("Loaded: "+loaded+"/"+total);
$("#full-screen").append(img);
},
loaded_all: function(loaded, total) {
$("#indicator").html("Loaded: "+loaded+"/"+total+". Done!");
}
});

});
</script>

</head>

<body>
<p id="indicator">Waiting for click</p>
<p id="full-screen">

</p>

</body>
</html>

May this helps you

Top

Page 1 of 1

[ 1 post ]

Page 1 of 36

1, 2, 3, 4, 5 ... 36

	Views	Last post
jQuery confirmation message by shishirbabel » Sat May 12, 2012 5:43 am in Javascript & Javascript libraries	2590	Sat May 12, 2012 5:43 am shishirbabel
display comments jquery php by samn1 » Thu Apr 05, 2012 10:37 am in Javascript & Javascript libraries	1775	Thu Apr 05, 2012 10:37 am samn1
Customizing the fck editor menu. by sahithi » Thu Nov 10, 2011 12:06 pm in Javascript & Javascript libraries	1753	Thu Nov 10, 2011 12:06 pm sahithi
Disabling and enabling a block by sahithi » Thu Nov 10, 2011 11:47 am in Javascript & Javascript libraries	1160	Thu Nov 10, 2011 11:47 am sahithi
How to remove right click option in a web page using js by samir » Fri Oct 21, 2011 1:08 pm in Javascript & Javascript libraries	1351	Fri Oct 21, 2011 1:08 pm samir

Other Forums

Other Services

Search