画像の読み込み中に「読み込み中...」というテキストを表示し、すべての画像が読み込まれるとテキストを「読み込み済み」に変更するこのスクリプトがあります。新しい画像を読み込むボタンを追加して、動的に読み込まれた画像でも機能するようにしました。
これは Chrome では完全に機能しますが、Firefox では「読み込み中...」というテキストは表示されません。これがなぜなのか、私にはわかりません。ページの読み込みが開始され、すべての画像が読み込まれるわけではないため、「読み込み中..」というテキストが作成されるはずですが、作成されません。次に、すべての画像の読み込みが完了すると、「読み込み中」というテキストが表示されます。
あるメッセージが表示され、他のメッセージが表示されない理由がわかりません。特に、"Loading..." テキストを作成する前に満たさなければならない条件がないため、自動的に起動するはずです。
$(document).ready(function() {
var checkComplete = function() {
if($('img').filter(function() {return $('img').prop('complete');}).length == $('img').length) {
$('.status').text('Loaded');
} else {
$('.status').text('Loading...');
}
};
$('img').on('load',function() {
checkComplete();
});
$('#button').click(function() {
$('img.a').attr('src' , 'http://farm9.staticflickr.com/8545/8675107979_ee12611e6e_o.jpg');
$('img.b').attr( 'src' , 'http://farm9.staticflickr.com/8382/8677371836_651f586c99_o.jpg');
checkComplete();
});
checkComplete();
});