＊はじめに!!
こんにちは！ぴーすけです！
jQueryのreadyイベントは有名だと思いますが、それをJavaScriptで書く事って少ないと思います。
今回はその方法を記事にします！
スポンサードリンク
＊書き方はこちら!!
jQuery
$(function() {
//処理
});
//または
$(document).ready(function() {
これをJavaScriptで書き直すと
JavaScript
window.addEventListener('DOMContentLoaded', function() {
となります。
そうです。readyイベントはそもそもDOMContentLoadedイベントなのです！
＊ready(DOMContentLoaded)イベントの発火タイミング!!
これは「DOMの構築が完了したら発火するイベント」ということになっているみたいです。簡単に言えば、「HTMLのタグが解析し終わった時」という事です。
もっと簡単に言うと、「文字が画面に表示され終わったら」という感じですかね。
なので、画像なんかの表示を待つ事なく処理が行われるので、「window.onload」よりも少し早く処理が走ります。
画像をどうこうするための処理を書いていた場合には、このreadyではなくwinodow.onloadに設定した方が挙動が安定します。
HTMLのタグや文字をどうこうするなど、画像とは関係のない処理を書いていた場合は、このready(DOMContentLoaded)に処理を紐付けた方が早く動くのでいいと思います。
ちなみに、画像の表示を待ってから処理を行うwindow.onloadの書き方はこちら
＊まとめ!!
jQueryの「ready」はJavaScriptでは「DOMContentLoaded」で書ける！
発火タイミングは、HTMLのタグが読み終わった後なので、画像の読み込みを待たずに処理が始まるります。
なので、画像と関係ない処理は「ready(DOMContentLoaded)」イベントを使って、画像に関係がない処理がある場合は「load」イベントを使いましょう。