Webページのロードが完了したらJS関数を実行して欲しい

Pocket

Masonryを使ってレイアウトさせてたりとかしたんだけど、画像読込のタイミング、ないしはWebフォント読み込み完了のタイミングでもう一度位置計算して欲しいというお話。

HTMLデータ読込→Masonryによる位置計算、配置→画像が読込完了(Webフォント読み込み完了)になると、Masonryの枠が重なっちゃうんですよね。なので、それぞれ読込が完了したときに位置計算して欲しい。

前者、画像とかについては、$(window).load()みたいなノリでやればおk

後者、Webフォントについては、FontLoaderを使う事にした

 

ひとまずは以下のような感じで、Masonryの位置計算部分を関数の形で記述しておく。(再計算用のメソッドとかありそうだけどし〜らない)

function mason(){
$('article').masonry(){
〜Masonryのオプション〜
});
}

 

・画像とか

よく見るサンプルコードは(上記のように関数の形で用意しておいたなら)

$(function(){
mason();
〜その他やりたいこと〜
});

という感じだけど、$(function(){ほにゃらら})の形は、HTMLを読み込み終えたら実行されてしまうらしい。

やることは簡単。$(window).load()をに差し替えればおk

$(window).load(function(){
mason();
〜その他やりたいこと〜
});

 

・Webフォント

WebFontLoaderを使えば良いらしい。文字幅の変化を検知してWebフォント読み込み完了をキャッチするとかいう手法も見かけたけど、面倒そうなのでやめとく()

WebFontLoaderはGoogle Fonts, Typekit, Fonts.com, Fontdeckを読み込める…らしいが、他のものも使えるようで、今回はそっちの記述で。

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
var fontconfig = {
custom:{
families:['フォント名'],
urls:['WebフォントCSSのURL']
},
active: function(){mason();},
inactive: function(){mason();}
};
WebFont.load(fontconfig);

active:Webフォントの読み込みが完了(レンダリングが完了)したら実行したい内容

inactive:ブラウザでWebフォントが有効でない場合もしくはフォントが読み込めなかった時に実行したい内容

 

そもそもJavascriptとか全く勉強しないで触ってるんだけどすげえつらい(基礎くらい勉強しような)

お茶漬け

たまーに飲み屋で食べるお茶漬けめちゃウマい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です