JQuery кладки ломает (складывает изображения) в Chrome / Safari, но только при первой загрузке - PullRequest
Новая
       4

JQuery кладки ломает (складывает изображения) в Chrome / Safari, но только при первой загрузке

13 голосов
/ 20 сентября 2011

Кажется, что когда я пытаюсь загрузить страницу, все изображения накладываются друг на друга.Но если вы нажмете на ссылку, которая приведет вас на ту же страницу (например, на домашнюю ссылку), то появится масонство. Поэтому я думаю, что кладка загружается слишком рано, как прежде, чем jquery готовит страницу или что-то в этом роде.

Вот мой вызов jquery: 

$(document).ready(function(){
    $('#image_roll_container').masonry({
        itemSelector: '.box'
    });

....

Вот эта страница:

http://ratattoos.com/

она отлично работает в Firefox и IE8.

Ответы [ 12 ]

0 голосов
/ 25 марта 2013

На Firefox и на моем iPad 2 кладка работала нормально, но в Chrome и Safari на OS X элементы перекрывались / складывались при загрузке страницы, и даже до изменения размера окна даже происходило. После поиска в коде jquery.masonry.js я обнаружил, что могу вызвать resize () сразу после создания кладки, чтобы все элементы правильно переставили. Сейчас все работает нормально. 

jQuery(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
    itemsSelector: '.thumbnail',
    isFitWidth: true
    }).resize();
}); 
})

все остальные решения: (окно) .load, установка ширины и высоты в CSS, атрибуты img и т. Д., Просто не работали для меня.

0 голосов
/ 27 января 2013

Другой способ, если вы знаете высоту изображения, это назначить их в CSS перед загрузкой Masonry, тогда компоновка выполняется быстрее, чем ожидание изображений.Этот метод работает, если, например, все ваши изображения имеют одинаковый размер.Тогда ваш сайт все равно будет быстро загружаться при медленных соединениях, например, на мобильных устройствах.

Я разместил небольшой скрипт для альтернативного метода здесь:
http://instancia.net/loading-jquery-masonry-on-mobile/

Если вы используете этот скрипт, отредактируйтечисла, чтобы соответствовать вашему.

Страница:
...