home > blog > javascript > jqueryライブラリを読み込む前に処理を実行させる方法

jqueryライブラリを読み込む前に処理を実行させる方法

一般的なjqueryの書き方と解決策

▼ jqueryライブラリが読み込まれた後だと、下記のような書き方が一般的だと思います。

$('.demoClick').click(function() {
$('.demoIn').fadeIn().css('display','block');
});

▼ 先に結論を。下記のような書き方をすれば解決します。

window.addEventListener('DOMContentLoaded', function() {
$('.demoClick').click(function() {
$('.demoIn').fadeIn().css('display','block');
    });
});

解説をどうぞ

一般的にjqueryライブラリ（こういうの→<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>）の読み込み後にjqueryの記述を書くかと思います。
ですが、CMSなどの記事投稿ではjqueryライブラリの後に記述するのが難しいでしょう。
厳密には可能ですが、毎回jsファイルに書き込むのは手間です。
僕はワードプレスを利用していますが、こう思ったのです。

「この記事だけしかつかわないしな〜、そのためだけにjsファイルに書くのは嫌だな〜、記述が増えるし管理しづらくなるな〜」



なので、僕はscriptタグで囲って、記事投稿内にjqueryを書いてみました。
が、処理が実行されません…。consoleエラー…。
調べた結果、原因はjqueryライブラリの読み込みより上にjqueyの記述を書いてしまっているからでした。

▼ この問題を回避する一つの解決策がこの呪文。

「addEventListener」「DOMContentLoaded」

window.addEventListener('DOMContentLoaded', function() {
    ここに処理を記述してね
});

「addEventListener」は色々なイベントに合わせて実行させる関数。

「DOMContentLoaded」は、HTMLの読み込みと解析が終わったあとに実行されるイベントで、簡単な言い方をすると「cssや画像などのリソース」を読み込む前に処理を実行させられます。
つまりjqueryライブラリを読み込む前でも処理を実行させられるのです。

ものすごく簡単にまとめましたが、ざっとこんなイメージで良いと思います。

サンプルデモ・コード

▼ サンプルコード

クリックしたら…

▼ HTMLコード

<p class="demoClick">クリックしたら...</p>
<p class="demoIn" style="display:none;">僕が出現！(押しても僕は消せないよ。。)</p>

▼ jsコード

window.addEventListener('DOMContentLoaded', function() {
$('.demoClick').click(function() {
$('.demoIn').fadeIn().css('display','block');
    });
});
RETURN
top