Execute a function when a <link> element has finished loading

Question

I'm using jQuery Masonry to lay out my page, but I'm using a custom @font-face font. The problem being that Masonry doesn't know the metrics of the font until it's loaded.

The Masonry docs suggest that you use $(window).load() instead of $(document).ready() to call the layout functions, but I don't want to have to wait until all the images etc. load. I can specify the dimensions of the images exactly, so Masonry doesn't need to wait until they're loaded. It's just the text that's the problem.

How can I get jQuery to call a callback when the <link> element that links in the font finishes loading?

EDIT: The obvious solution (that is, $('#link_id').load(...)) doesn't seem to work.

EDIT2: I didn't realise (stupid of me) that the <link> element is actually linking in a stylesheet with a @font-face declaration. I want to wait until the font has been loaded, not just the stylesheet...

Answer 1

The jQuery $(document).ready() event is only useful to you if you want to fire things off once the DOM is finished loading, ignoring whether any images / stylesheets and such are set to go, so your best option will be something that listens for the availability of that file. Unfortunately, as events go, your only probable option is the window.load() event.

Your situation is being complicated from a number of areas because different browsers will treat the @font-face rule differently. Some will render all HTML before applying the custom font, some will load the font as soon as it's found before rendering the rest of the page.

My best suggestion is to make sure you're calling the Masonry script at the bottom of your page. This gives you the best chance of having your document elements loaded before any scripts get to work. You might also get some traction from investigating the attachEvent and addEventListener functions for IE and Mozilla respectively (not sure about what Webkit browsers need), although the sorts of events you can bind and the one you actually want to listen for may not be covered.

Probably not what you want to hear. Hopefully someone else more worldly than I has a better idea.

Answer 2

The WebFont loader is the right way to do this.