Das Jquery Plugin Masonry kann ein sehr nützlicher Bestandteil einer Webseite sein – wenn es so funktioniert, wie es funktionieen soll. Gibt es aber Probleme mit der Implementierung – sitzen die Elemente beispielsweise nicht dort, wo man sie erwartet, dann kann Masonry auch schnell zum Ärgernis werden. Die Fehlersuche und Problemsuche kann mitunter recht mühsam sein.

Eines der wohl bekanntesten Probleme ergibt sich immer dann, wenn man besonders viele oder besonders große Bilder in einem Masonry Layout platzieren möchte. Manchmal bemerkt man das Problem zunächst gar nicht – wenn dann aber im Laufe der Zeit mehr und mehr Inhalte auf die Webseite geladen werden kommt es plötzlich zu eine „haufenbildung“ – die Bilder werden nicht mehr nebeneinander und untereinander angezeigt, sondern übereinander  – in Haufen. Dieses Problem kann auch bei besonders langsamen Internetverbindungen auftreten – oder wenn der Webserver mal ein bisschen länger braucht, um die Bilder auszuliefern. Zum Glück ist das Problem aber nicht nur sehr verbreitet. sondern auch gut dokumentiert – und es lässt sich mithilfe des Zusatzskriptes imagesLoaded relativ leicht beheben..

Das andere, vermutlich nicht so weitverbreitete aber technisch ganz ähnliche Problem kann auftreten, wenn man in den Masonry-Elementen Webfonts verwendet. Das Problem ist nicht ganz so offenischtlich erkennbar – aber dennoch nervig. Es äussert sich, indem einzelne Elemente aus dem Layout zu rutschen scheinen – manchmal sitzen sie nur ein paar Pixel zu weit unten, manchmal auch an falscher Stelle.. Häufig tritt das Problem nur auf, wenn die verwendeten Webfonts noch nicht im Cache des Browsers gespeichert sind. Je nach Seitenstruktur kann es also sein, dass Webdesigner / Webentwickler das Problem gar nicht direkt zu sehen bekommen. Erst nach dem leeren des Caches fällt plötzlich auf, dass ein Element ein paar Pixel zu weit unten sitzt.

Was verursacht die Masonry Verschiebung um ein paar Pixel?

Masonry macht eigentlich nichts weiter, als die größe aller Elemente zu berechnen und anschliessend die jeweilige Position daraus zu berechnen. In den meisten Fällen funktioniert das auch ganz prblemlos. Aber manchmal kann eine langsam ladende Webfont die Berechnungen durcheinander bringen. Masonry berechnet in diesem Falle die Positionen aller Layoutelemente bevor die Webfont geladen ist. Wenn die Webfont dann zB eine geringere Laufweite hat, fallen ggf. Zeilenumbrüche weg – einzelne Elemente benötigen weniger Platz, als Masonry zunächst berechnet hat – und so kommt es zur Verschiebung.

Wie gesagt – das Problem ist unter Umständen nicht so leicht zu erkennen. Nur wenn die Webfont noch nicht geladen ist und durch das Laden Zeilenumbrüche wegfallen kommt es zu der Verschiebung. Es kann unter Umständen Wochen oder Monate dauern, bis das Problem auftritt. Und dann ist es auch nur für diejenigen sichtbar, die die Webfont nicht im Cache gespeichert haben. Und selbst dann fällt der Fehler unter Umständen nicht gleich auf.

Am einfachsten ist der Fehler zu erkennen, wenn das Layout sich aus Elementen zusammensetzt, die alle dieselbe Höhe haben. Wenn dann nur eines der Elemente einen Zeilenumbruch „verliert“ kommt es zu der beschriebenen Verschiebung. Manchmal ändert sich auch die Reihenfolge, in der die Elemete angezeigt werden, weil eines der Elemente zu viel Platz einnimmt. Als ob ein unsichtbaren Element im Wege wäre. Chaos.

Wie auch immer. Auch für dieses Problem gibt es eine Lösung: der Webfontloader prüft zunächst, ob die angegebenen Webfonts geladen sind. Erst dann wird Masonry gestartet.

Das Skript wurde von Google in Zusammenarbeit mit Typekit entwickelt und man kann es kostenlos nutzen. Entweder installiert man es direkt auf dem eigenen Webspace, oder man lädt es dynamisch von einer Google-Adresse. Ist das Skript einmal implementiert muss man nur noch die die Skriptanweisungen, die Masonry eigentlich starten,  mit einer entsprechenden Klammer versehen. So stellt man sicher, dass Masonry nur dann geladen wird, wenn bereits alle Webfonts geladen sind.

zunchst muss also der Webfontloader bzw. webfont.js geladen werden:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'></script>

Dann klammert man den Masonry Code mit der Webfont Load Abfrage:

// prüfen ob alle Webfonts geladen sind:
WebFont.load({
    custom: {
      families: ['RobotoCondensedRegular','RobotoCondensedItalic', 'RobotoCondensedBold' ]
    },
active: function() {

// cprüfen ob alle Bilder geladen sind:
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry
  $grid.masonry({
    // wir verwenden grid-sizer um die Spaltenbreite zu bestimmen:
    columnWidth: '.grid-sizer',
    // do not use .grid-sizer in layout
    itemSelector: '.grid-item',
    originLeft: true,
    percentPosition: true
  });
});

}

});

Auf der Projektseite bei Github ist das Skript ausführlich dokumentiert:
https://github.com/typekit/webfontloader