Проблемы с цепочкой событий jQuery в Safari

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, оборачивает ее в код шаблона, добавляет ее в #container и повторяет до тех пор, пока не будет достигнут предел.После того, как все фотографии вставлены, Masonry запускает и организует div.

Это прекрасно работает в Chrome и Firefox, но не в Safari - где событие .load срабатывает до полной загрузки всех фотографий, нарушая тем самым макет.

Я обновил пример, чтобы лучше показать, что я имею в виду.В Chrome / Firefox консольный вывод «1-й, 2-й», а в Safari «2-й, 1-й»

Любые советы?

Answer 1

Вы можете передать обратный вызов загрузки в качестве второго параметра в вызов jflickrfeed, и это обеспечит запуск «кладки» только после загрузки изображений из Flickr.

Вот возможный образец:

$('#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
    });
});

Надеюсь, это поможет.

Answer 2

Решил сам, добавив счетчик:

var counter = 0; 

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

$(window).load(function () { 
    var i = setInterval(function () { 
        if (counter = 20) { 
            $('#container').masonry({ 
                singleMode: true 
            }); 
            clearInterval(i); 
        } 
    }, 20); 
});

Уродливо, но работает ..

Answer 3

Я не уверен, насколько это будет полезно, или если вообще что-то изменится.Но для догадки, если проблема заключается в том, что #container недоступен при срабатывании $(window).load, вы можете попробовать настроить таймер для повторной проверки его существования, а при обнаружении установить кладку и убить таймер.:

$(window).load(function () {
    var i = setInterval(function() {
        if($("#container").length) {
            $('#container').masonry({
                singleMode: true
            });
            clearInterval(i);
        }}, 
    20);
});