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

Question

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

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

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

....

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

http://ratattoos.com/

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

Answer 1

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

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

Answer 2

похоже, что мне нужен был плагин imagesLoaded, чтобы скрипт Monsry работал должным образом с подобными chrome и safari

Answer 3

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

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

Работает нормально, нашел вот здесь: https://github.com/desandro/masonry/issues/35

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

Answer 4

Вы правы насчет загруженных изображений.В Firefox все работало нормально, но в Chrome / Safari стекируется.

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

Код:

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

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

Answer 5

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

Answer 6

У меня была обратная проблема, как описано: первая загрузка работала нормально в 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

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

Answer 7

Событие «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++;
    });
});

Answer 8

если использовать $ ('img'). Load (function () F5 (refesh) => error

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

$(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>

Answer 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>

Answer 10

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