Darstellungsfehler im Masonry-Layout bei Webkit-Browsern beheben

Nach dem frisch Laden eines responsive Masonry-Grids (Breite der Gridelemente in Prozenten, Höhe daher nicht definiert) mit Bildern lagen die Elemente in Opera (Webkit) der zweiten Reihe zum Teil über den Elementen der vorherigen. In der letzten Reihe wurden die Texte unter den Bildern vom Seitenfooter verschluckt. Nach Resize oder erneutem Laden der Seite trat das Problem nicht mehr auf. Es betraf auch nur Elemente mit Bildern. Die Ursache dafür war offenbar, dass die Höhe der Elemente ohne die Bilder berechnet worden war.

Folgerichtig macht es also Sinn, zuerst die Bilder zu laden, und dann Masonry auszuführen. Das Plugin dafür heißt imagesLoaded und stammt aus derselben Quelle wie das Masonry-Skript

enqueue script (WordPress)

wp_register_script('images-loaded', {my_plugin_url} . 'js/images-loaded.min.js',array('jquery'),'',true);
wp_register_script('pkgd-masonry', {my_plugin_url} . 'js/masonry.pkgd.min.js',array('images-loaded'),'',true);
wp_enqueue_script('masonry-params', {my_plugin_url} . 'js/masonry-params.js',array('pkgd-masonry'),'',true);

masonry-params alt

$('.itemlist').masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
});

masonry-params neu

$('.itemlist').imagesLoaded( function() {
    $('.itemlist').masonry({
        itemSelector: '.grid-item',
        percentPosition: true,
        columnWidth: '.grid-sizer',
        gutter: '.gutter-sizer'
    }); 
});

Anschließend trat der Darstellungsfehler in Opera nicht mehr auf.