こんにちは。まさきです。
今回はjQueryが動かないときに確認すべきポイントとして、readyメソッドについてご紹介します。
また、合わせてreadyメソッドとloadメソッドの違いについて、ご説明しようと思います。
NGなjQueryの書き方
まずはjQueryが動かない時のよくあるNGな書き方です。
こちらのHTMLとJavaScriptをご覧ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<title>Ready</title>
<script src="ready.js"></script>
</head>
<body>
<div class="foo">
<h1>サンプル</h1>
<span>この文字を非表示にする</span>
</div>
</body>
</html>$('.foo').hide();このJavaScriptではhideメソッドを使って、初期表示時に要素を非表示にしようとしています。
しかし実際の画面をご覧ください。
ばっちり文字が表示されてしまっています。
これは、『html要素の読み込みよりjQueryを先に実行しているので、hideメソッド実行時点ではfooクラスが見つからず、JavaScriptの処理が終わってからHTMLが描画されている。』といったことが起きているのです。
ではこれを回避する方法は2つあります。
1つ目は単純にscriptの読み込みをhtmlの後に記載する方法です。
つまりbodyの終わりタグの直前に記載するといったことになります。
これはあまり良い方法とされていません。
2つ目はreadyメソッドを使用する方法です。
今回はこちらのreadyメソッドについてご紹介いたします。
readyメソッド
readyメソッドはHTMLタグがブラウザで解釈され、DOMが利用可能になったタイミングで実行されます。
つまりreadyメソッドを使うと、先ほどのjQuery実行時にHTML要素が見つからない問題を防ぐことができます。
書き方は、jQueryを丸々readyメソッドの中に入れます。
$(document).ready(function() {
//ここにjQueryの処理を書く
$('.foo').hide();
});このとき、かっこの数やインデントに注意しましょう。
$(function(){});
readyメソッドをを省略した書き方があります。
$(function() {
//ここにjQueryの処理を書く
$('.foo').hide();
});こちらの方が現場では使われている印象があります。
見た目上readyメソッドを使っている感じはあまりしませんが、この書き方が出てきたらreadyメソッドの省略した書き方だということを覚えておきましょう。
loadメソッド
jQueryの実行について調べているとreadyメソッドの他にloadメソッドが出てくると思います。
loadメソッドとは、HTMLタグが解析され、画像などのデータを全て読み込み終わったタイミングで実行されます。
readyとの大きな違いは、readyメソッドはDOMが使用可能になったタイミングに比べて、
loadメソッドは画像などのデータの読み込みが終わったタイミングです。
実はこれは大きな違いです。
画像などの読み込みが終わってから実行になると、
大きい画像が配置されている場合、jQueryの実行タイミングがかなり遅れてしまいます。
例えば縦に長いページで、下の方に読み込む必要がある画像データが多いとします。
その場合上の方はユーザの画面に表示されていますが、jQueryの処理がまだ行われていないため、
jQueryで見た目の変更が実行されておらず、ユーザにはストレスになってしまうかもしれません。
こういったことを防ぐためにreadyメソッドを使うのが良いとされています。
なので結論、基本的にjQueryの実行タイミングにはreadyメソッドを使うのがよいでしょう！
以上、『jQueryが動かないときに知っておきたいreadyとloadの違い』についてでした。
