Masonryを使ってレイアウトさせてたりとかしたんだけど、画像読込のタイミング、ないしはWebフォント読み込み完了のタイミングでもう一度位置計算して欲しいというお話。
HTMLデータ読込→Masonryによる位置計算、配置→画像が読込完了（Webフォント読み込み完了）になると、Masonryの枠が重なっちゃうんですよね。なので、それぞれ読込が完了したときに位置計算して欲しい。
前者、画像とかについては、$(window).load()みたいなノリでやればおｋ
後者、Webフォントについては、FontLoaderを使う事にした
ひとまずは以下のような感じで、Masonryの位置計算部分を関数の形で記述しておく。（再計算用のメソッドとかありそうだけどし〜らない）
[javascript]
function mason(){
$(‘article’).masonry(){
〜Masonryのオプション〜
});
}
[/javascript]
・画像とか
よく見るサンプルコードは（上記のように関数の形で用意しておいたなら）
[javascript]
$(function(){
mason();
〜その他やりたいこと〜
});
[/javascript]
という感じだけど、$(function(){ほにゃらら})の形は、HTMLを読み込み終えたら実行されてしまうらしい。
やることは簡単。$(window).load()をに差し替えればおｋ
[javascript]
$(window).load(function(){
mason();
〜その他やりたいこと〜
});
[/javascript]
・Webフォント
WebFontLoaderを使えば良いらしい。文字幅の変化を検知してWebフォント読み込み完了をキャッチするとかいう手法も見かけたけど、面倒そうなのでやめとく（）
WebFontLoaderはGoogle Fonts, Typekit, Fonts.com, Fontdeckを読み込める…らしいが、他のものも使えるようで、今回はそっちの記述で。
[html]
[/html]
[javascript]
var fontconfig = {
custom:{
families:[‘フォント名’],
urls:[‘WebフォントCSSのURL’]
},
active: function(){mason();},
inactive: function(){mason();}
};
WebFont.load(fontconfig);
[/javascript]
active：Webフォントの読み込みが完了（レンダリングが完了）したら実行したい内容
inactive：ブラウザでWebフォントが有効でない場合もしくはフォントが読み込めなかった時に実行したい内容
そもそもJavascriptとか全く勉強しないで触ってるんだけどすげえつらい（基礎くらい勉強しような）