jquery-isotope jquery-masonry typekit webfont-loader packery

Masonry / Isotope / Packery Images Loaded + Web Fonts

I am using Packery.js [ http://packery.metafizzy.co/ ] on a site and am having a few layout issues on page load. I have looked at the documentation for Masonry, Isotope, and Packery (all very similar plugins, all developed by David DeSandro) and it discusses addressing issues where the layout should be triggered after all images are loaded as well as any webfonts.

http://packery.metafizzy.co/appendix.html

I have Packery working just fine with imagesLoaded... but am not sure how to tie in the Google Web Font loader with that. Below is my code for loading fonts, followed by the imagesLoaded Packery Layout. If any one could suggest a way to have Packery fire after both Web Fonts and imagesLoaded, I would be eternally grateful.

// before <body>
<script type="text/javascript">
WebFontConfig = {
    google: {
        families: [ 'Bitter:400,700,400italic:latin' ]
    },
    typekit: {
        id: // hidden for obvious reasons
    }
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
</script>

// after </body>
// jquery and plugins are loaded prior to the following code
jQuery(document).ready(function($) {

    var $container = $('section.home-page main');

    imagesLoaded( $container, function() {

        $container.packery({
            itemSelector: 'article',
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer'
        });

    });

});

Solution

It is all about creating the best algorithm to solve your problems , and this requires robust analysis of the problem , then finding all possible solutions , and finally apply the best solution.

The problem :

Creating a Masonry effect for your page, which depends on the load of different unrelated elements (webfonts, and images), or in other terms which depends on the asynchronous loading of unrelated page elements.

Possible Algorithms :

Load an item (webfont, or images first), and on success load of first item , start to load the other
Use Flags, and invoke both load functions asynchronously , based upon returned flags, the developer can decide what to do.

First Algorithm is wrong for sure

As in a series call if one call fails for any reason, rest of calls will not take place, because it depends on another item load callback.
Time taken to load item will be longer cause events are taking place in a series way, not in a parallel way.

Second algorithm seems ok

Solution :

Referring to both docs for webfontloader , imagesLoaded

Create two flag variables

var imagesAreLoaded = false , fontsAreLoaded = false
Set each flag true on a successful callback for load event

for webfontloader if you want to give highest priority to the font that will be used only in your packery plugin then you should use fontactive, if the plugin depends on more than one family you better use active :

WebFontConfig = {  
  active: function() { // set fontsAreLoaded to true here }, 
  fontactive: function(familyName, fvd) { // set fontsAreLoaded to true here } 
};

WebFontConfig is the object you pass to webfontloader load method.

Do same for imagesLoaded event

$('#container').imagesLoaded()
.done( function( instance ) { //set imagesAreLoaded to true here })

please note that imagesLoaded jQuery plugin returns a jQuery Deferred object. This allows you to use .always(), .done(), .fail() and .progress(), similarly to the emitted events.

Usually everything should run fine, and usually fonts will load before the images will, but a good developer should handle all possible scenarios.

$(document).load(function() {
// if both flags are true , go ahead and load your masonry. // else if either of flags is false, show a warning, retry loading , or whatever you think is better })

Note : My answer doesn't really provide much coding , because from what i think the documents for both plugins are very clear , but i think the issue was how to handle the problem using correct algorithm.