0

画像の読み込み中に「読み込み中...」というテキストを表示し、すべての画像が読み込まれるとテキストを「読み込み済み」に変更するこのスクリプトがあります。新しい画像を読み込むボタンを追加して、動的に読み込まれた画像でも機能するようにしました。

これは Chrome では完全に機能しますが、Firefox では「読み込み中...」というテキストは表示されません。これがなぜなのか、私にはわかりません。ページの読み込みが開始され、すべての画像が読み込まれるわけではないため、「読み込み中..」というテキストが作成されるはずですが、作成されません。次に、すべての画像の読み込みが完了すると、「読み込み中」というテキストが表示されます。

あるメッセージが表示され、他のメッセージが表示されない理由がわかりません。特に、"Loading..." テキストを作成する前に満たさなければならない条件がないため、自動的に起動するはずです。

jsfiddle の例| フルページの例

$(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();
});
4

2 に答える 2