JavaScripthttps://blog.emwai.jp/javascript/img-load-not-working/スポンサードリンクjQueryを使って、画像(IMG要素)にイベントリスナーを設置したら動かなかったので対策したメモです。今まで気づかなかったのなんでかなぁ、とちょっと不思議でしたが単に物忘れだと思うので備忘録として書きます。一定の間隔で複数の画像をスライドさせるようなコードをチャチャッと書いてみたものの、各画像が大きそうだったので「次の画像を表示前に読み込み開始させるか」と思ってIMGタグのロードイベントを取ろうと思ったら、Safariではうまく動いていたのにChromeやFirefoxではうまく動きませんでした。alert('読み込みました。');});こうなった場合、jQueryを必要としない他の書き方も同様に動かないです。画像のロードイベントが始まっていないなというのは容易に想像が付くと思います。alert('読み込みました。alert('読み込みました。');});とりあえず「原因はどうでもいいのでとにかく動くヤツ頼む」と思ってググったんですが、海外のフォーラムも含めてネット上にある解決策を試してもうまくいきませんでした。その中に「キャッシュが効いてると(すでに読み込み済み)ロードイベントが発生しないので.completeを見るんだよ、カッカッカ」的なコードがあったんですが残念ながらハズレ、こちらの環境ではキャッシュに関わらずこの値は偽のままでうまく動作しませんでした。Overflow解決で、上のコードをヒントに「どっちみちロードイベントを一度発生させる」ように修正することで解決しました。お尻に.load()をくっつけて必ずロードが始まるようにします。alert('読み込みました。');}).load();気をつける点は、イベントにバインドさせるために.on()や.bind()、.load()ではなく、一度だけ実行する.one()を使うところでしょうか。これによって、今まで動いていたブラウザで2回実行しなくて済みます。これで無事に画像の読み込み後の処理を実行することができるようになりました。ドキュメント内の<IMG>要素だけでなく、CSSによる大きな背景画像を先に読み込むような場合にも便利だと思います。以上、jQueryで、画像のロードイベントのコールバックが動かない件の対策でした。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれないコメントは無視されますのでご注意ください。このブログについてご覧いただきありがとうございます。このブログは、高知県でウェブデザイン・印刷物のデザイン制作を行っているフリーランス、森田秀章のブログです。