jQueryload()
を使用して、置き換えている画像src
がロードされているかどうかを確認しています。ただし、時々、動かなくなったりハングしたりするように見えます。以下に jsFiddle のリンクがあります。読み込み中のグラフィックがページ上でスタックするようにするには、ボタンの 1 つを 2 回クリックします。
http://jsfiddle.net/dmcgrew/LLMs8/3/
これは、私が現在構築しているサイトの問題を「ほぼ」再現していますが、問題は関連していると思います。私が構築しているサイトでは、次の手順を実行した場合にのみ、この「ハング」が発生します。
- 画像3ボタンをクリック
- 非表示ボタンをクリック
- 画像 3 ボタンをもう一度クリックします
- 読み込み中のグラフィックがページにスタックするようになりました。
これが私のJSです...
$("button").not("off").bind("click", function(){
var imgPath = $(this).attr("data-image"); //grab image path from data attr
console.log(imgPath);
$(".loading").show(); //show loading gif
$("img.the_image").hide(); //hide the img
$("img.the_image").attr("src","http://farm7.staticflickr.com/"+imgPath).load(function() {
$(".loading").hide(); //hide loading gif
$("img.the_image").show(); //show the newly loaded img
});
});
$("button.off").bind("click", function(){
$("img").hide();
});
load()
画像が読み込まれたかどうかを確認する最良の方法は? 画像を置き換えて、ロードされているかどうかを確認するより良い方法はありますか (おそらく AJAX?)。