Gli elementi degli isotopi si sovrappongono al carico iniziale

Question

Utilizzo di un layout in muratura per this site e al primo caricamento ogni casella si sovrappone. Se si utilizza uno degli elementi di navigazione per ordinare o anche solo rimanere su "tutti", si riorganizzano. Qualche idea?

Answer 1

Non ho ancora una reputazione di 50 quindi non posso commentare, ma volevo condividere un paio di suggerimenti in cui mi sono imbattuto in passato perché ho usato molto questo plugin, e potrebbe aiutare altre persone.

Prima di tutto, uso decisamente la funzione imageLoaded come ha detto Sarah e non l'onload. (https://github.com/desandro/imagesloaded)

Suggerimento 1 - Per accelerare il plugin isotopo per recarsi al lavoro (utile se le dimensioni delle immagini sono grandi, o avete un sacco di loro), si carica un'immagine segnaposto per ogni contenitore, poi dopo l'imagesloaded il plugin si attiva, è possibile far sì che il plug-in degli isotopi funzioni rapidamente. Quindi puoi scambiare l'immagine reale con un attributo dati che contiene l'url reale di src, basta farlo usando il callback isotopico (http://isotope.metafizzy.co/events.html). L'unico modo in cui le tue immagini dovrebbero avere le stesse dimensioni del segnaposto o il dimensionamento dei contenitori potrebbe essere incasinato e sovrapporsi di nuovo.

Suggerimento 2 - Non l'ho mai fatto, ma un metodo che stavo pensando di utilizzare era caricare le immagini come immagine di sfondo del contenitore, impostare un'altezza e con per il contenitore (o almeno la parte dell'immagine di esso), imposta le immagini come sfondo-size: cover; e quindi non è necessario preoccuparsi del caricamento delle immagini prima che il plug-in degli isotopi possa funzionare.