Масонство-перекрытия с перекрытием с изображениями Загруженный плагин

Question

У меня есть плагин масонства и плагин с изображениями Loaded, и кажется, что загрузка изображений не работает. Когда я обновляю страницу, divs перекрываются. Только после изменения размера окна браузера выполняется совпадение с перекрытием. Иногда при освежении кажется, что он работает ... это довольно случайно. Я новичок с jQuery и javascript.

Я принимал одного HTML-страницы здесь, так что вы можете увидеть, что я говорю о: masonry test

Вот как я инициализацией, но вы можете увидеть полный код, если вы посмотрите на исходный код для ссылка выше, потому что проблема может быть в другом месте.

$(document).ready(function() { 

    // Initialize Masonry 
    $('#content').masonry({ 
     columnWidth: 320, 
     itemSelector: '.item', 
     isFitWidth: true, 
     isAnimated: true, 
    }).imagesLoaded(function() { 
     $(this).masonry('reload'); 
    }); 
}); 

Answer 1

Проблема заключается в том, что imagesLoaded() вызывается до того, как кладка плагин завершает инициализацию. Если вы посмотрите в консоли браузера на тестовой странице, вы увидите сообщение об ошибке.

Посмотрите на example на сайте разработчика, чтобы узнать, как использовать imagesLoaded вместе с кладкой. Вместо того, чтобы связывать функции, вы должны дождаться загрузки изображений для инициализации кладки.

$('#content').imagesLoaded(function() { 
    $('#content').masonry({ 
     columnWidth: 320, 
     itemSelector: '.item', 
     isFitWidth: true, 
     isAnimated: true, 
    }); 
}); 

Вы могли быть в состоянии сделать это, как вы изначально пытались (т.е.. Цепочки методов), но вы не можете использовать $(this) в функции imagesLoaded. Эта функция является обратным вызовом, поэтому она не выполняется синхронно. Если вы смените функциональность на

$('#content').masonry('reload'); 

это может сработать так, как вы хотели, но я не проверял это.