[jQuery]$(document).readyと$(window).loadの違い[自分メモ]

今までずっとjqueryの実行タイミングをデフォで$(document).readyで書いてました。
今更こんな事書いたら、いろんなお客さんから怒られそうですが、今まで作ってきたjsアニメーションの実行のタイミングは何かをクリックしたら動かすといったような、必ずトリガーが何かしらあるものでした。

で、ちょうど今ページ読み込みと同時に動くアニメーション作っているのですが、PC環境だと問題なくてもスマホで問題があるんすよ。
wifiならまだしも、3G環境でただでさえ読み込みに時間がかかる状態で実行のタイミングが$(document).readyだと、スマホでデータの読み込みが終わった時点でアニメーションが終了しているという本末転倒な事態になる事が判明。

$(document).readyってなんぞ

DOMが読み込まれた時点で実行します。
htmlの構造が読まれた時って事だもんで、画像ファイルの読み込みを待たずにスクリプトの処理を開始します。

じゃあ$(window).loadってなにさ

DOM内に含まれる全ての要素の読み込みが完了した時点で実行します。
なので、今回の懸念である「3G回線」で画像の読み込み待ってる間にアニメーション終わっとるがな、という事態を解消するにはうってつけだったわけで。

ただ、調べている間に見つけたサイトには$(document).readyの方が良い的な事書いてあったので、$(window).loadはあまり推奨はされていないみたいですね。
うーん、もうちょっと勉強が必要だなぁ。

今気づいたけどもう2ヶ月もconcrete5に関する記事書いてないや…。

Posted on
コメントする

今さら…。jQueryとprototypeの共存とか…。

私は最近はもっぱらjQueryしか使ってないのですが、４〜５年前のトレンドというか、なんというか、prototype派の人もいたわけですよ。

でですね。

「prototype使ってて、今後はjQueryに移行したいけど、今の段階だとprototypeも残したい」みたいな案件もあるんですねぇこれが。

prototype使ってるhtmlにそのままjQuery入れると、”$”が共通して使用しているため、競合してしまってどっちかが動かないか、もしくは両方全く動かない状態に陥ります。

じゃーどうしましょう。

こーしましょう。
まず、prototype.jsから読み込みをします。
で、noConflictの記述をします。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery-x.x.x.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;
</script>

上記まで書けたら、解決までほぼ完了。

と言いたいところですが、jQueryで使用している”$”を全て”j$”にする必要があります(jQueryのソースファイルじゃなくて、プラグインで使用している”$”です)。

例えば、jQueryでスクロールを制御しているのであれば、

[javascript]
$(function(){
$(‘a[href^=#]’).click(function() {
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
});
return false;
});
});
[/javascript]

と上記のように書いてあったとして、それを下記のように書き換えます。

[javascript]
j$(function(){
j$(‘a[href^=#]’).click(function() {
var href= j$(this).attr("href");
var target = j$(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
});
return false;
});
});
[/javascript]

とりあえず全部の”$”を”j$”にすりゃOKです。”$”を”j$”に全置換したらいいんじゃないかしら。

これで競合せずにjQueryとprototypeが使用できるようになります。

でもまーぶっちゃけ、jQueryとprototypeを両方使うなんて普通に考えたらしないんだけど、案件次第でさ…。

Posted on
コメントする