Przerwy murarskie jquery (stosy obrazów) w chrome/safari, ale tylko przy pierwszym obciążeniu

Question

Wygląda na to, że kiedy próbuję załadować stronę, wszystkie obrazy są ułożone jeden na drugim. Ale gdybyś kliknął link, który prowadzi do tej samej strony (np. Link do strony głównej), to zaczyna się murowanie. Myślę więc, że murowanie ładuje się zbyt wcześnie, tak jak wcześniej jquery przygotowuje stronę lub coś takiego.

Oto moje wezwanie jQuery:

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

.... 

Oto strona w pytaniu:

http://ratattoos.com/

to działa dobrze w Firefox i IE8.

Answer 1

wygląda Potrzebowałem plugin o nazwie imagesLoaded, aby skrypt działał poprawnie Monsry z takimi Chrome i Safari

Answer 2

udało mi się rozwiązać ten problem z następującym uszczypnąć:

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

Answer 3

Masz rację odnośnie obrazówLoaded. To działało dobrze w Firefoksie, ale układanie w Chrome/Safari.

Oto link http://masonry.desandro.com/demos/images.html

Kod:

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

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

Answer 4

Niedawno natknąłem się na ten temat. Aby to naprawić, użyłem atrybutów img i width. Problem rozwiązał się.

Answer 5

Innym sposobem, jeśli znasz wysokość obrazu, jest przypisanie ich do CSS przed załadowaniem kamienia, wtedy układ jest szybszy niż czekanie na obrazy. Ta metoda działa, jeśli na przykład wszystkie obrazy mają ten sam rozmiar. Wtedy Twoja strona będzie nadal ładować się szybko na wolnych połączeniach, takich jak telefony komórkowe.

napisałem kawałek skryptu do alternatywnej metody tutaj:
http://instancia.net/loading-jquery-masonry-on-mobile/

Jeśli użyjesz tego skryptu, edytować numery, aby dopasować je.

Answer 6

W Firefoksie i na moim iPadzie 2 murowanie działało dobrze, ale w chrome i safari na OS X elementy zachodziły na siebie i układały się w trakcie ładowania strony, aż do momentu, w którym nawet zmiana rozmiaru okna. Po wykopaniu kodu jquery.masonry.js odkryłem, że mogę wywołać funkcję resize() zaraz po utworzeniu muru, aby wszystkie elementy zostały poprawnie uporządkowane. Teraz wszystko działa dobrze.

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

wszystkich innych rozwiązań: (okno) .load, ustawienie szerokości & wysokość w CSS i atrybuty img, itp, po prostu nie działa dla mnie.

Answer 7

próbowałem wszystkiego sugerowane w tym wątku, nic nie działało, a następnie znaleźć to:

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

działa dobrze teraz, znalazłem go tutaj: https://github.com/desandro/masonry/issues/35

Original post autor: https://github.com/desandro

Answer 8

To potrzebuje wysokości w tych przeglądarkach, aby wyświetlać poprawnie, jak powiedziała Jennifer. Używam funkcji getimagesize() php, aby uzyskać wysokość i szerokość obrazów. Działa teraz idealnie.

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

jeśli użycie $ ('img') obciążenia (function() F5 (refesh) => Błąd

Nowych Metod.

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

The " "zdarzenie" będzie wyzwalać dla każdego obrazu w DOM, to jest przesada.Musisz zaktualizować układ muru, gdy ostatni obraz w DOM ładuje.Tutaj jest kod:

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

miałem odwrotny problem, jak opisano: najpierw obciążenie działało poprawnie w systemie Mac OS X Safari, ale zmieniając siatkę z wszystkich nowych elementów spowodował je wszystkie na stosie w lewym górnym rogu. Co więcej, oczekiwanie na gotowe zdarzenie i ustawienie szerokości CSS & szerokości na naszych elementach nie naprawiło tego.

Na naszej stronie mamy kategorie danych, które są wyświetlane w siatce murarskiej i tylko jedna kategoria pokazuje się na raz. Użytkownik może zmienić kategorię w dowolnym momencie i wywołać żądanie AJAX, aby załadować nowe dane. W najnowszym Safari (9.1, 10) oraz przeglądarek takich jak Chrome, moglibyśmy po prostu to zrobić przy zmianie kategorii, aby zamienić we wszystkich nowych elementów:

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

Jednak w niektórych wersjach Safari, które nie pracują, a musieliśmy to zrobić w zamian:

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

Bo nie mają czasu, aby wyśledzić każdą wersję przeglądarki, która może mieć wpływ tego błędu, przeszedłem do tej ostatniej metody dla wszystkich przeglądarek.