jQuery: preload

by Diego Vieira

HTML

<img src="//lorempixel.com/800/600/abstract/0">
<img src="//lorempixel.com/800/600/abstract/1">
<img src="//lorempixel.com/800/600/abstract/2">
<img src="//lorempixel.com/800/600/abstract/3">
<img src="//lorempixel.com/800/600/abstract/4">
<img src="//lorempixel.com/800/600/abstract/5">
<img src="//lorempixel.com/800/600/abstract/6">
<img src="//lorempixel.com/800/600/abstract/7">
<img src="//lorempixel.com/800/600/abstract/8">
<img src="//lorempixel.com/800/600/abstract/9">
<img src="//lorempixel.com/800/600/abstract/10">
<img src="//lorempixel.com/800/600/animals/0">
<img src="//lorempixel.com/800/600/animals/1">
<img src="//lorempixel.com/800/600/animals/2">
<img src="//lorempixel.com/800/600/animals/3">
<img src="//lorempixel.com/800/600/animals/4">
<img src="//lorempixel.com/800/600/animals/5">
<img src="//lorempixel.com/800/600/animals/6">
<img src="//lorempixel.com/800/600/animals/7">
<img src="//lorempixel.com/800/600/animals/8">
<img src="//lorempixel.com/800/600/animals/9">
<img src="//lorempixel.com/800/600/animals/10">
<img src="//lorempixel.com/800/600/business/0">
<img src="//lorempixel.com/800/600/business/1">
<img src="//lorempixel.com/800/600/business/2">
<img src="//lorempixel.com/800/600/business/3">
<img src="//lorempixel.com/800/600/business/4">
<img src="//lorempixel.com/800/600/business/5">
<img src="//lorempixel.com/800/600/business/6">
<img src="//lorempixel.com/800/600/business/7">
<img src="//lorempixel.com/800/600/business/8">
<img src="//lorempixel.com/800/600/business/9">
<img src="//lorempixel.com/800/600/business/10">
<img src="//lorempixel.com/800/600/cats/0">
<img src="//lorempixel.com/800/600/cats/1">
<img src="//lorempixel.com/800/600/cats/2">
<img src="//lorempixel.com/800/600/cats/3">
<img src="//lorempixel.com/800/600/cats/4">
<img src="//lorempixel.com/800/600/cats/5">
<img src="//lorempixel.com/800/600/cats/6">
<img src="//lorempixel.com/800/600/cats/7">
<img src="//lorempixel.com/800/600/cats/8">
<img...

JavaScript

$.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) {
    if(done == true)
        alert("foi");
});