interruzioni in muratura jquery (pile immagini) in chrome/safari ma solo al primo caricamento

Question

Sembra che quando provo a caricare la pagina, tutte le immagini sono impilate l'una sull'altra. Ma se dovessi fare clic su un collegamento che ti porta alla stessa pagina (come il link di casa), allora la muratura entra in gioco. Quindi penso che la muratura si stia caricando troppo presto, come prima che jquery prenda visione della pagina o qualcosa del genere.

Ecco la mia chiamata jQuery:

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

.... 

Ecco la pagina in questione:

http://ratattoos.com/

funziona bene in Firefox e IE8.

Answer 1

sembra che ho bisogno di un plugin chiamato imagesLoaded in modo che lo script Monsry per funzionare correttamente con artisti del calibro di Chrome e Safari

Answer 2

sono riuscito a risolvere questo problema con il seguente Tweak:

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

Answer 3

Sei corretto sulle immagini caricate. Stava funzionando bene in Firefox ma impilando in Chrome/Safari.

Ecco il link http://masonry.desandro.com/demos/images.html

Codice:

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

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

Answer 4

Recentemente ho sono imbattuto in questo problema. Per risolvere il problema, ho utilizzato gli attributi di larghezza e altezza. Il problema si è risolto da solo.

Answer 5

Un altro modo, se si conoscono le altezze dell'immagine, è assegnarle nel CSS prima di caricare la Massoneria, quindi il layout è più veloce dell'attesa per le immagini. Questo metodo funziona se, ad esempio, tutte le tue immagini hanno la stessa dimensione. Quindi il tuo sito continuerà a caricarsi rapidamente con connessioni lente, come i dispositivi mobili.

ho postato un po 'di scrittura per il metodo alternativo qui:
http://instancia.net/loading-jquery-masonry-on-mobile/

Se si utilizza questo script, modificare i numeri per abbinare il vostro.

Answer 6

Su Firefox e sul mio iPad 2 la muratura funzionava bene ma in chrome e safari su OS X gli elementi si sovrapponevano/impilavano sul caricamento della pagina e fino a quando non si verificava una ridimensionamento della finestra. Dopo aver scavato nel codice di jquery.masonry.js ho scoperto che posso attivare un ridimensionamento() subito dopo aver creato la muratura in modo che tutti gli elementi si riorganizzino correttamente. Ora tutto funziona bene.

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

tutte le altre soluzioni: .load (finestra), impostando la larghezza & altezza in CSS e su attributi img, etc, semplicemente non ha funzionato per me.

Answer 7

Provato di tutto suggerito in questa discussione, niente ha funzionato, poi trovato questo:

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

funziona bene ora, ha trovato qui: https://github.com/desandro/masonry/issues/35

originale Messaggio Autore: https://github.com/desandro

Answer 8

E ' ha bisogno di altezze in questi browser per visualizzare correttamente come ha detto Jennifer. Uso la funzione getimagesize() di php per ottenere l'altezza e la larghezza delle immagini. Funziona perfettamente ora.

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

se l'uso $ ('img') di carico (function() F5 (refesh) => errore

Nuovi metodi:.

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

Il " caricamento "si attiverà per ogni immagine nel DOM, questo è eccessivo. È necessario aggiornare il layout della muratura quando viene caricata l'ultima immagine nel DOM. Ecco il codice:

Answer 12

Ho avuto il problema inverso come descritto: il primo caricamento funzionava bene in Mac OS X Safari, ma cambiare la griglia con tutti i nuovi elementi li ha fatti impilare tutti nell'angolo in alto a sinistra. Inoltre, l'attesa per l'evento pronto e l'impostazione dell'altezza CSS & sui nostri elementi non l'hanno risolto.

Sul nostro sito, abbiamo categorie di dati che vengono visualizzati nella griglia della muratura e solo una categoria mostra alla volta. Un utente può cambiare la categoria in qualsiasi momento e attivare una richiesta AJAX per caricare i nuovi dati. In ultima Safari (9.1, 10) e browser come Chrome, si potrebbe semplicemente fare questo quando si cambia la categoria di scambiare in tutti i nuovi elementi:

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

Tuttavia, in alcune versioni di Safari, che non avrebbe funzionato, e abbiamo dovuto fare questo, invece:

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

Perché io non ho il tempo per rintracciare tutte le versioni del browser che potrebbero essere interessati da questo bug, sono passato a quest'ultimo metodo per tutti i browser.