jquery - 将预加载器添加到一堆图像中

Question

我正在使用一堆图像并创建幻灯片。

$(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();
    });
});

我怎样才能:

如果有 20 张图像，则预加载图像以及如何在此过程中显示预加载图标？我看过一些关于 SO 的预加载示例，但似乎没有什么合适的。

一把 fiddle - http://jsfiddle.net/BkwrZ/

Answer 1

$.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/

我给你的链接中有解释。只需阅读所有答案。 Preloading images with jQuery

因此，如果您想显示预加载的 perc，只需更改以下行:

console.log(this, perc, done);

所以不是将其记录在某些 div 中显示。

看这个例子 http://jsfiddle.net/ACbTK/6/

<小时/>

检查这个http://jsfiddle.net/BkwrZ/1/希望对您有帮助。