Question

我有一个幻灯片，我需要用jQuery初始化。初始化需要完全加载所有幻灯片图像，以便我可以获得它们的实际宽度和高度。我无法改变这一部分。

考虑以下布局：

<div class="slideshow">
  <img />
  <img />
  <img />
</div>
<img />
<img />
<img />

我需要在加载幻灯片容器内的三个图像后立即初始化幻灯片。我不能等到页面上的其他图像被加载，因为可能有数千张图像。

我有什么想法可以解决这个问题吗？

Answer 1

根据我的评论，您可以将检查/加载行为包装在jQuery插件中，并返回一个这样的承诺：

$.fn.imagesLoaded = function () {
    var def = $.Deferred();
    var count = this.length;
    this.each(function () {
        if (this.complete) {
            if (!--count) {
                def.resolve();
            }
        } else {
            $(this).load(function () {
                if (!--count) {
                    def.resolve();
                }
            });
        }
    });
    return def.promise();
}

然后简单地使用这样：

$('.slideshow img').imagesLoaded().done(function () {
    alert("loaded");
});

Answer 2

这是我最终使用的内容，比我希望的要复杂得多：

// Prepare the slideshow as soon as all of its images have been loaded
var slideshowImages = $('.slideshow img');
var slideshowImagesLoadedCount = 0;

// Check how many images have already been loaded
slideshowImages.each(function() {
    if(this.complete) {
        slideshowImagesLoadedCount++;
    }
});

// If all the images have loaded already, prepare the slideshow
if(slideshowImagesLoadedCount === slideshowImages.length) {
    prepareSlideshow();
} else {

    // Otherwise wait until all images have been loaded
    slideshowImages.load(function() {
        slideshowImagesLoadedCount++;

        if(slideshowImagesLoadedCount === slideshowImages.length) {
            prepareSlideshow();
        }
    });
}

jQuery：加载图像子集后立即执行函数

2 个答案: