jQuery -- 動かない時と動く時がある

Question

https://teratail.com/questions/28993
上記質問の続きです。

上記質問は jQuery を読み込むことで解決しました。

しかしながら、動作するときとしない時があります。
(動作しない時が多いです。)

読み込みタイミングの問題だと思うのですが
どこに記述すればよいのでしょうか？

画像がたくさんあるので リクエストしたファイルがあるかどうかわかる前に、
該当スクリプトの実行が終了しているんだと思います。

ご回答をお願いします。

Answer 1

headタグ内の、他のscript読み込みより上に記述してください。

<script src="jquery.js">
<script src="script.js">

それと実行タイミングですが、画像を読み込んだ後に実行する場合、$(document).readyではダメです。
HTMLのタグを読み込んだタイミングで実行される＝画像読み込みは完了していません。
画像読み込みが完了した後に処理をする場合は、$(window).on('load')を使ってください。

// HTMLさえすべて読み込めばよく、画像の読み込み完了を待つ必要がない場合
$(document).ready(function(){
  // 実行する処理を書く
});

// 画像の読み込み完了を待つ必要がある場合
$(window).on('load', function(){
 // 実行する処理
});

// jQueryなしの書き方
window.onload = function() {
  // 実行する処理
};