javascript - 在ajax回调后隐藏加载gif

Question

我有一个简单的问题，但找不到明确的答案。我需要在 ajax 调用后加载大量图像，并且我想使用动画 gif 作为预加载器。我正在使用以下代码:

function loadProducts(url) {
    $("#loading").show();
    $('#inner').fadeOut(1).load(url + ' .product-list', function() {
        $('#inner').fadeIn(1000, function() {
            $("#loading").hide();
        });
    });
}

加载 HTML 时隐藏#loading .load(url + '.product-list'。问题是屏幕上仍然呈现沉重的图像，我想继续显示动画 .gif 直到图像渲染完成。有没有办法知道屏幕上的图像何时渲染？。提前致谢。

Answer 1

您可以使用 promises 来检查所有图像何时加载完毕，然后删除正在加载的 gif。

这会创建一个在图像加载时解析的 promise，所有 promise 都保存在一个数组中，当所有 promises 都解析时，即所有图像都已加载，回调会触发。

function loadProducts(url) {
    $("#loading").show();

    $('#inner').fadeOut(1).load(url + ' .product-list', function() {

        var promises = [];

        $('#inner').find('img').each(function(_, image) {
            var img = new Image(), 
                def = new $.Deferred();

            img.onload = function() {
                def.resolve();
            }

            promises.push( def.promise() );

            img.src = image.src;
            if (img.complete) img.onload();
        });

        $.when.apply(undefined, promises).done(function() {

            $('#inner').fadeIn(1000, function() {
                $("#loading").hide();
            });

        });
    });
}