javascript - Safari 中 jQuery 事件链的问题

Question

我正在使用 jQuery、jflickrfeed 和 jQuery.Masonry 构建一个简单的照片日志 - 但在 Safari 中获取事件链时遇到一些问题。

这是一些示例代码:

$(document).ready(function() {
    $('#container').jflickrfeed({
        limit: 20,
        qstrings: {
            id: '58201136@N00'
        },
        itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>'
    }, function(data) {
        console.log("1st");
    });
});

$(window).load(function() {
    console.log("2nd");
    $('#container').masonry({
        singleMode: true
    });
}); 

因此，jflickrfeed 从我的 flickr feed 中提取一张照片，将其包装在模板代码中并将其附加到 #container 中，然后重复此操作，直到达到限制。插入所有照片后，Masonry 就会启动并排列 div。

这在 Chrome 和 Firefox 中工作得很好，但在 Safari 中则不然 - 在所有照片加载完成之前，.load 事件会触发，从而破坏布局。

我更新了示例以更好地说明我的意思。在 Chrome/Firefox 中，控制台输出是“1st, 2nd”，而在 Safari 中，控制台输出是“2nd, 1st”

有什么建议吗？

Answer 1

您可以将加载回调作为第二个参数传递给“jflickrfeed”调用，这将确保仅当加载来自 Flickr 的图像时才会调用“masonry”。

这是一个可能的示例:

$('#container').jflickrfeed({
    limit: 20,
    qstrings: {
        id: '58201136@N00'
    },
    itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>'
}, 
function () {
    $('#container').masonry({
        singleMode: true
    });
});

希望有帮助。