如何防止 jquery 的 load() 函数覆盖进度条动画 gif？答案

【问题标题】：How can I prevent jquery's load() function from overriding progress bar animated gif?如何防止 jquery 的 load() 函数覆盖进度条动画 gif？
【发布时间】：2012-08-05 19:51:26
【问题描述】：

我有一个充满照片的页面，每张照片都用class="photo_wrap" 包裹在一个div 中。用户可以看到一定数量的照片。如果他们想看更多，那么他们点击“查看更多照片”按钮。当他们等待照片加载时，我会显示一个带有id="spinner" 的“进度条”gif。由于砌体插件和加载照片的一些问题，在所有img 已完全加载后，我已将砌体设置为“重新加载”。问题是，这也阻止了我的“进度条” gif 动画。我认为写$('div.photo_wrap img').load(... 只会影响带有class="photo_wrap" 的照片，但它仍然会阻止我的“进度条” gif 动画。为什么？

$(document).ready(function(){

    $("#spinner").show();

    $.ajax({
        type: "POST",
        url: 'my_script.php',
        dataType: 'html',
        success: function(data){
            var $container = $('#myPhotos');
            $container.append(data);

            $('div.photo_wrap img').load(function(){    
                $container.masonry( 'reload' );
            });

            $container.masonry( 'reload' );

            $("#spinner").hide();
        }
    });

    return false;
});

【问题讨论】：

如上所述，ajax 加载会在文档准备好后立即运行，而不是响应单击“查看更多照片”按钮。这是故意的吗？
上述代码包含在一个命名函数中，当用户点击“查看更多照片”时会调用该函数。

标签： jquery jquery-masonry jquery-load

【解决方案1】：

$('div.photo_wrap img').load(function(){...}); 将在加载时为每个图像触发。至少如果处理程序在 onload 事件发生之前就位，它会这样做。

为了在处理程序到位之前抑制图像加载，您可以按如下方式提供图像：

<img src="", data-src="myImages/....jpg">

因此，javascript 可以将 url 从 data-src 复制到 src，并且在附加 onload 处理程序之前不可能触发图像的加载事件：

function loadMoreImages() {
    $("#spinner").show();
    $.ajax({
        type: "POST",
        url: 'my_script.php',
        dataType: 'html',
        success: function(data){
            var $container = $('#myPhotos');
            $container.append(data);
            var promises = $('div.photo_wrap img').map(function() {
                var d = $.Deferred();
                $(this).attr("src", $(this).data('src'));//copy img url across
                $(this).load(d.resolve).error(d.resolve);//attach load and error handlers
                return d.promise();
            }).get();
            $.when.apply(this, promises).done(function() {
                $container.masonry('reload');
                $("#spinner").hide();
            });
        }
    });
}

部分测试

您会看到，为了在所有图像加载后做出响应，我们将一组 promise（每个 img 一个）传递给 jQuery.when。

我不确定这是否能解决问题，但它是正确的。

【讨论】：