0

我有一个充满照片的页面，每张照片都包含在一个带有class="photo_wrap". 用户可以看到一定数量的照片。如果他们想看更多，那么他们点击“查看更多照片”按钮。当他们等待照片加载时，我会显示一个带有id="spinner". 由于 masonry 插件和加载照片的一些问题，我已将 masonry 设置为 'reload' 在所有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;
});
4

1 回答 1

0

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

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

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

因此，javascript 可以从data-srcto复制 url 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.

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

于 2012-08-06T01:47:40.490 回答