jQueryで画像の読み込み完了をイベントとして取得したい場合

jQueryで画像の読み込み状態を制御したい場合について。
要するにあれです、重たい画像が読み込まれる間にクルクルローディング中みたいな画像を表示して、読み込みが終わったら実際の画像を表示するとか、そういうときに使います。

jQueryにも$img.load(fn)という書き方があって、

$("img#test1").load(function(){
  alert("読み込み完了");
}

こんな風に書くと、test1というIDが付いている画像が読み込まれたら、アラートが表示されると言うことになっています。
なっているんですが、どうやらIEではキャッシュの画像を読み込んだ時に読み込み完了のイベントが発生しないらしい、という話が。。。

で、探してみたら見つかったのが、jQueryのプラグイン、imagesLoaded.js。
これは、このプラグインを読み込んでおけば、上述の「load」の部分を「imagesLoaded」に変えることでIEでキャッシュを読み込んだ場合でも、読み込み完了として識別できるという代物。
例えばこんな感じ。

$("img#test1").imagesLoaded(function(){
  alert("読み込み完了");
}

ところが。
これはこれで問題発生。なんか読み込み終了のイベントは確かに発生しているのですが、画像自体が×になってしまっているということが、たまに起こる。
（再現性がない。頻度は感覚的なもの）
まぁ、細かく実験していないので、処理の組み合わせによる現象かもしれず、シンプルな使い方では問題ないのかもしれません。

調べてみると、imagesLoaded.jsはIE9で怪しいらしい。ということはきっとIE10でも怪しいんじゃないか。
後述しますが、jQueryのプラグインはブラウザ対応の信頼性が低いと感じるので、やっぱりこういうものは使わないで解決したい。

そして行き着いたのが、画像をキャッシュさせない、という力業。
基本的には好きじゃない方法です。
画像に頻繁に更新が入るなら別ですが、同じ画像ならキャッシュを読んでもらってすぐに表示された方が良いに決まってるのだから、それをさせないというのはいかがなものかと。
でも、背に腹は代えられないし。

具体的にはこんな感じ。

var myDate = new Date();
nNoCache = myDate.getTime();
var myImg = new Image();
myImg.src = "xxxx.jpg?" + nNoCache;
myImg.onload = function (){
  alert("読み込み完了")
}

※jQuery使ってない。(^_^;
キャッシュを読み込まないように毎回違う数字を引数として付ける方法です。引数はgetTime()を使うことで、ほぼ確実に毎回違う数字にすることができます。（0.001秒未満でリロードした場合以外ｗ）

以上。

以下蛇足。

jQueryにはいろいろ便利なプラグインがあってうれしいのですが、jQuery本体ほどきちんとチェックされていない可能性が高いのが難点です。
つまり、各ユーザーが勝手に作ってるものですので、どの程度、広いブラウザで動作するか分からない。
また、作成者のサイトなどに明記されていたとしても、最後の動作検証以降にリリースされたブラウザについては補償されないわけで。

jQuery本体だってわかんないと言えばそうなんですが、プラグインよりはしっかりしているし、バージョンアップすることも視野に入れられる。情報も多い。

また、プラグインはjQuery本体のバージョン次第で動かない場合もある。

そんなことを考えるに付け、ようするになるべくプラグインを使わない方が安全だなという方針にしています。
結局人の作ったものに責任は持てないし、複雑なものほど何かあった時に対応ができないんで、自分で作り付けた方が結果的に楽なことが多い、という経験則ですね。