Jquery masonry breaks (складывает изображения) в хром/сафари, но только при первой загрузке

Ответ 1

выглядит так, как будто мне нужен плагин под названием imagesLoaded для того, чтобы Monsry script работал правильно с хром и сафари

Ответ 2

Мне удалось исправить эту проблему следующим образом:

<script type="text/javascript">
    $(document).ready(function(){
        $('img').load(function(){
            $(".content_photo").masonry();
        });
        $(".content_photo").masonry();
    });
</script>

Ответ 3

Пробовал все, что было предложено в этом потоке, ничего не получилось, а затем нашел это:

$(window).load(function(){   $('#content').masonry(); });

Хорошо работает сейчас, нашел его здесь: https://github.com/desandro/masonry/issues/35

Оригинальный автор сообщения: https://github.com/desandro

Ответ 4

Вы правы относительно imagesLoaded. Он отлично работал в Firefox, но укладывался в Chrome/Safari.

Вот ссылка http://masonry.desandro.com/demos/images.html

код:

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box'
  });
});

Ответ 5

Недавно я столкнулся с этой проблемой. Чтобы исправить это, я использовал атрибуты ширины и высоты img. Проблема разрешилась сама.

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

В этих браузерах необходимо, чтобы высота отображалась правильно, как говорит Дженнифер. Я использую функцию php getimagesize() для получения высоты и ширины изображений. Теперь работает отлично.

Ответ 9

<script>
        var container = document.querySelector('#masonry');
        var msnry = new Masonry( container, {
            itemSelector: '.item',
            "columnWidth": 200,
        });
        $('.item img').load(function(){
                var msnry = new Masonry( container, {
                itemSelector: '.item',
                "columnWidth": 200,
            });
        })
</script>

Ответ 10

если использовать $('img'). load (function() F5 (refesh) = > ошибка

Новые методы:

$(window).on('load resize', function() {
  if ($('.masonry-wrap').length) {
    $('.masonry-wrap')
    .css('max-width', $(window).width());
  }
});
$(window).on('load', function() {
  if ($('.masonry-wrap').length) {
    setTimeout(function() {
      $('.masonry').masonry({
        columnWidth: 0,
        itemSelector: '.grid-item'
      });
    }, 1);
  }
});

<div class="masonry-wrap">
  <div class="masonry">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    ....
  </div>
</div>

Ответ 11

Событие "load" будет запускаться для каждого изображения в DOM, это излишне. Вам необходимо обновить макет кладки при загрузке последнего изображения в DOM. Вот код:

$(document).ready(function(){
    // init the masonry on document ready event;
    // at this point the images are not loaded so the layout will break UNLESS you set up the correct values for the "width" and "height" attributes of the img tags
    $('.content_photo').masonry();

    // to make sure the layout will not break apart we update the masonry layout just after the last image from the DOM was loaded
    var total_images = $('img').length;
    var counter = 1;
    $('img').load(function() {
        if(counter == total_images) {
            alert('the last image in the DOM was loaded. now we can update the masonry layout');
            $('.content_photo').masonry('layout');
        }
        counter++;
    });
});

Ответ 12

У меня была обратная проблема, как описано: первая загрузка отлично работала в Mac OS X Safari, но изменение сетки со всеми новыми элементами заставило их всех стечь в верхнем левом углу. Кроме того, ожидание готового события и установка высоты и ширины CSS на наших элементах не исправили его.

На нашем сайте у нас есть категории данных, которые отображаются в сетке кладки, и показывается только одна категория. Пользователь может переключать категорию в любое время и запускать запрос AJAX для загрузки новых данных. В последних версиях Safari (9.1, 10) и браузерах, таких как Chrome, мы могли бы просто сделать это, изменив категорию для замены всех новых элементов:

    // domData is HTML string from the server
    // IMJS is our global variable that we use for globals and lookups
    $("#divTemplateCategoryName").after(domData); // insert new HTML
    var elementsToAdd = $(".grid-item-template-info"); //select the elements
    IMJS.MasonryGrid.masonry('addItems', elementsToAdd); // tell masonry to add them
    IMJS.MasonryGrid.masonry('layout'); // tell masonry to layout again

Однако в некоторых версиях Safari это не сработало, и мы должны были сделать это вместо:

    // domData is HTML string from the server
    // IMJS is our global variable that we use for globals and lookups
    IMJS.MasonryGrid.masonry('destroy'); // destroy the grid
    $("#divTemplateCategoryName").after(domData); // insert new HTML
    InitMasonry(); // re-do our entire masonry init

Поскольку у меня нет времени отслеживать каждую версию браузера, на которую может повлиять эта ошибка, я перешел к последнему методу для всех браузеров.