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上看到了一些预加载示例，但似乎没有任何内容。

小提琴 - 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/我希望它能为您提供帮助。

将预加载器添加到一堆图像

1 个答案: