1

我似乎无法理解 imagesLoaded 插件的延迟方法。我不知道如何在我的具体情况下使用它。我正在使用 JSON 从外部来源获取照片。一切都加载到#photographs。我想实现在加载所有照片时隐藏所有内容（显示大型加载器动画）；加载 15 张照片后，删除大的加载动画并显示一个小的并继续加载其余的照片。当我所有的照片都加载完毕后，隐藏小加载动画。

我有以下代码，但它当然是错误的，因为只有在加载所有内容时才会调用回调。我正在寻找 .progress() 方法..

$('#photographs').imagesLoaded(function($images) {
        var totalAmount = $images.length;
        if(($images.length) > 15) {
            $("#photographs, #loader").fadeIn("fast");
            $("#bigloader").fadeOut("fast");
            $("#photographs").gridalicious({
                gutter: 2,
                animate: true,
                effect: 'fadeInOnAppear',
                width: 430,
                complete: onComplete()
            });
        } else if(($images.length) == totalAmount) {
            $("#loader").fadeOut("fast");
        };
    });

像这样的东西？

var dfd = $("#photographs").imagesLoaded();

    dfd.progress(function( isBroken, $images, $proper, $broken ) {
        var totalAmount = $images.length;

        if(($proper.length) > 15) {
            $("#photographs, #loader").fadeIn("fast");
            $("#bigloader").fadeOut("fast");
            $("#photographs").gridalicious({
                gutter: 2,
                animate: true,
                effect: 'fadeInOnAppear',
                width: 430,
                complete: onComplete()
            });
        }
    });

编辑：有关进度方法的信息可以在这里找到https://github.com/desandro/imagesloaded

4

2 回答 2

0

您应该将处理程序附加到图像本身，以便每次加载图像时都会触发它：

var loaded = 0;
var totalAmount = $('#photographs img').length;

$('#photographs img').each(function() {
    loaded;
    $(this).imagesLoaded(function($images) {
        loaded++;
        if (loaded > 15) {
            // stuff to do when more than 15 images
        } else if (loaded == totalAmount) {
            // stuff to do when all images loaded
        };
    });
});
于 2013-01-03T19:51:54.217 回答
0 
$(selector).imagesLoaded(function);

这种使用 ImagesLoaded 的方法似乎将您的函数注册到“always”事件。尝试显式处理 always 事件，但首先为“progress”事件添加处理程序，如下所示：

$(selector).imagesLoaded()
    .progress(function( instance, image ) {
        $(progressBarSelector).val( $(progressBarSelector).val() + 1);    
    })
    .always(function(){
         $(progressBarSelector).hide();
    });

在我通过显式定义此进度事件处理程序更改顺序之前，我的进度代码也没有被执行。

于 2013-06-30T03:03:59.490 回答