Question

我有一个充满照片的页面，每个照片都包含在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;
});

Answer 1

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

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

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

因此，javascript可以将网址从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();
            });
        }
    });
}

部分测试

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

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

如何防止jquery的load（）函数覆盖进度条动画gif？

1 个答案: