jQueryを読みこむ前にjQueryのコードを記述する

既に運用中のCMSサイトで特定の1ページのみjQueryの処理を追加したいということがあったのですが、jQuery本体はbodyの末尾で読み込まれているのに対して、scriptを追加できるのがそのページのコンテンツ内(記事本文内)のみということがあったので、そういった場合にjQueryを使用する方法をメモ。

サンプルコード

まずは特に対応しないで追加してみます。

<div class="contents">
<p>この.contents内にしか追加できない</p>
<script>
$(function() {
	console.log('.contents内');
});
</script>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$(function() {
	console.log('body末尾');
});
</script>

jQuery読み込み後に記述している13行目のconsoleは表示されますが、読み込み前に記述している.content内はエラーになります。
エラーになる場合のデモページ

次に対応方法ですが、loadイベントでjQueryを含む各リソースを読み込み終わった後に実行されるようにすることで、問題なく実行できるようです。

<div class="contents">
<p>この.contents内にしか追加できない</p>
<script>
window.addEventListener('load', function() {
	console.log($);
});
</script>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

対応後のデモページ