By U Zensen.

欲しいものはプログラミングで自分で作る。

jQueryのreadyイベントをJavaScriptで書く!!

2016 / 7 / 10
JavaScript
readyの書き方

はじめに!!

こんにちは!ぴーすけです!

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」イベントを使いましょう。

Pocket

コメント

コメントを残す