I am using a bunch of images and creating a slideshow.
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
How can I :
Preload the images if there are going to be say 20 of them and how to show a preload icon during this process? I have seen some preloading examples on SO but nothing seems to fit.
A fiddle - http://jsfiddle.net/BkwrZ/
$.fn.preload = function (fn) {
var len = this.length, i = 0;
return this.each(function () {
var tmp = new Image, self = this;
if (fn) tmp.onload = function () {
fn.call(self, 100 * ++i / len, i === len);
};
tmp.src = this.src;
});
};
$('img').preload(function(perc, done) {
console.log(this, perc, done);
});
http://jsfiddle.net/yckart/ACbTK/
You have there explained in the link I gave you. Just read all answers. Preloading images with jQuery
So if you want to show that preloaded perc just change the line from:
console.log(this, perc, done);
so instead of loging it display in some div.
See this example http://jsfiddle.net/ACbTK/6/
Check this http://jsfiddle.net/BkwrZ/1/ I hope it can help you.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments