2015-05-22 16 views
11

Sto tentando di affiancare più incorporamenti di Instagram con Masonry. Il problema è che l'instagram incorpora le dimensioni del cambiamento dopo il caricamento in modo che il layout lasci spazio.La callback JavaScript dopo l'inserimento di instagram è stata caricata?

C'è una richiamata che posso usare quando tutti gli incorporamenti di instagram nella pagina sono stati caricati? Sto pensando che avrei dovuto far scattare di nuovo in muratura dopo l'Instagram Incorporamenti aver caricato e ridimensionato correttamente

cercato $(document).ajaxStop() non ha funzionato

+0

perché non lo si carica prima da instagram e quindi si esegue il rendering di 'Massoneria'? – aswzen

+0

Sei hard-coding quegli incastri? Obbediscono a qualsiasi regola di scelta (ultime foto di alcuni hashtag, ultime foto di utenti specifici)? Mi sembra che tu debba fare una richiesta all'API di Instagram, ottenere tutte le foto contemporaneamente e creare il tuo html con la risposta (json). Ma questo metodo dipende da come stai selezionando le foto. –

+0

@aswzen sì questo è esattamente quello che sto cercando di fare, mi interessa approfondire come raggiungerlo? Quello che succede ora è quando la pagina carica gli incorporamenti di instagram vengono caricati parzialmente (in forma di testo), e quindi iam assumendo che faccia chiamate ajax per caricare l'immagine e i fogli di stile per l'iframe. Ho bisogno di un modo per sapere che gli embed hanno terminato il caricamento correttamente in modo da poter attivare la muratura –

risposta

5

Ho riscontrato un problema relativo al ridimensionamento dovuto alle richieste AJAX quando stavo utilizzando il codice JavaScript di Twitter. Ho risolto questo utilizzando il seguente codice:

$('#div').bind("DOMSubtreeModified", function() { 
    // ... 
}); 

Questo codice verrà eseguito quando gli elementi vengono modificati in un elemento div con un id di div. Questo è stato molto utile. Se hai bisogno di più assistenza, non aver paura di commentare questa risposta.

+1

Funziona meravigliosamente anche con Instagram .. L'ho usato per ottenere l'altezza finale del div, ma stava ritornando alla vecchia altezza, quindi ho usato 'window.setTimeout ('function()', 50) ; 'e ora funziona alla grande – Khaled

2

C'è una soluzione Daniel Buchner è possibile utilizzare per rilevare (evento di callback) elemento di ridimensionamento. È possibile racchiudere ciascun elemento incorporato in un elemento (<div>) e collegare il listener di ridimensionamento al div. Ogni volta che c'è un ridimensionamento, attiva la Massoneria. Se questo diventa saturo di trigger di riorganizzazione, impostare un timeout (500 ms) quando si verifica l'evento di ridimensionamento per riorganizzare solo dopo un periodo di stabilità.

L'ascoltatore di ridimensionamento è disponibile here.

+0

Sembra buono, anche se mi preoccupo di usare un timeout. proveremo questo a breve ASAP –

Problemi correlati