ページ読み込み完了時に処理を実行する
jQuery
$(document).ready(eventHandler);
// または
$(document).ready(() => {
// 処理
);JavaScript
document.addEventListener('DOMContentLoaded', eventHandler);
// または
document.addEventListener('DOMContentLoaded', () =>{
// 処理
);scriptタグにasync属性をつけた場合
<script src="hoge.js" async></script>のようにscriptタグにasync属性を付けると、ブラウザはJavaScriptの読み込み(ダウンロード)を待たずにレンダリングを行う。そのため、DOMContentLoadedイベントハンドラの登録が行われる前にレンダリングが完了してしまう可能性がある。
そのような場合は、document.readyStateの値がloadingかどうかをチェックするとよい。
if (document.readyState === 'loading') {
// レンダリングが完了していない場合
document.addEventListener('DOMContentLoaded', eventHandler);
} else {
// レンダリングが完了している場合
eventHandler();
}jQueryのonメソッドをJavaScriptだけで記述する
jQuery
$('#hoge').on('click', eventHandler);JavaScript
document.getElementById('hoge').addEventListener('click', eventHandler);
コメント