imagesLoaded jQuery插件

Question

我似乎无法理解imagesLoaded插件的延迟方法。我不知道如何在我的特定情况下使用它。我正在使用JSON从外部来源获取照片。所有内容都加载到#照片中。我想实现在加载所有照片时隐藏所有内容(显示一个大的加载器动画)；当加载了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

Answer 1

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

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

Answer 2

$(selector).imagesLoaded(function);

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

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

我的进度代码也不会被执行，直到我通过显式定义这个进度事件处理程序更改了顺序。