2015-05-22 9 views
11

Ich versuche mehrere Instagram-Einbettungen mit Mauerwerk zu kacheln. Problem ist, dass das Instagram nach dem Laden Größenänderungen einbettet, so dass das Layout Lücken hinterlässt.Javascript Rückruf nach Instagram Einbetten geladen?

Gibt es einen Callback, den ich verwenden kann, wenn alle Instagram-Einbettungen auf der Seite geladen haben? Ich denke, ich Mauerwerk wieder ausgelöst werden soll, nachdem die Instagram und Größe verändert geladen haben bettet richtig

versucht $(document).ajaxStop() nicht

+0

wieso lädst du es nicht zuerst aus instagram, dann machst du das 'Maurerhandwerk'? – aswzen

+0

Schreiben Sie diese Einbettungen hart? Befolgen sie irgendeine Regel der Wahl (letzte Bilder eines Hashtags, letzte Bilder eines bestimmten Benutzers)? Es klingt für mich, dass Sie eine Anfrage an die Instagram-API stellen sollten, alle Fotos gleichzeitig abrufen und Ihren eigenen HTML-Code mit der Antwort (json) erstellen sollten. Aber diese Methode hängt davon ab, wie Sie die Fotos auswählen. –

+0

@aswzen ja das ist genau das, was ich versuche zu tun, kümmern sich darum, wie man das erreicht? Was jetzt passiert, ist, wenn die Seite geladen wird, werden die Instagram-Embeds teilweise geladen (in Textform) und dann iam vorausgesetzt, dass sie Ajax-Aufrufe macht, um das Bild und Stylesheets für den Iframe zu laden. Ich brauche eine Möglichkeit zu wissen, dass die Einbettungen ordnungsgemäß geladen haben, so kann ich Mauerwerk auslösen –

Antwort

5

Ich hatte ein Problem mit der Größenanpassung aufgrund von AJAX-Anfragen, als ich den Twitter-Javascript-Einbettungscode verwendete. Ich beschloss, dies durch den folgenden Code:

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

Dieser Code wird ausgeführt, wenn Elemente mit einer ID von div unter einem div-Elemente geändert werden. Das war sehr nützlich. Wenn Sie mehr Hilfe benötigen, haben Sie keine Angst, diese Antwort zu kommentieren.

+1

Funktioniert wunderbar mit Instagram auch .. Ich habe es verwendet, um die endgültige Höhe des div zu bekommen, aber es war die alte Höhe zurück, so dass ich 'window.setTimeout ('function()', 50) ; 'und jetzt funktioniert es großartig – Khaled

2

Es gibt eine Lösung von Daniel Buchner funktionierten können Sie (Ereignisrückruf) Element Resize zu erkennen verwenden. Sie können jede Einbettung in ein Element (<div>) einbinden und den Größenanpasser an Ihr div anhängen. Immer wenn es eine Größenänderung gibt, löst Mauerwerk aus. Wenn dies bei Neuordnungs-Triggern übermäßig gesättigt wird, legen Sie ein Timeout (500 ms) fest, wenn das Größenänderungsereignis nur nach einer stabilen Periode auftritt.

Der Größenanpassungs-Listener ist verfügbar here.

+0

Hört sich gut an, obwohl ich mir vor einer Zeitüberschreitung sicher bin. werde so schnell wie möglich versuchen –