☰

背景画像が読み込まれているかどうかを確認するにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript jquery
背景画像が読み込まれているかどうかを確認するにはどうすればよいですか? 質問する

body タグに背景画像を設定し、次のようなコードを実行したいと思います。

$('body').css('background-image','http://picture.de/image.png').load(function() {
    alert('Background image done loading');
    // This doesn't work
});

背景画像が完全に読み込まれていることを確認するにはどうすればよいですか?

ベストアンサー1

これを試して：

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks as @benweet suggested
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

これにより、メモリ内に新しいイメージが作成され、ロード イベントを使用して src がロードされたことを検出します。

編集：Vanilla JavaScript では次のようになります。

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
   body.style.backgroundImage = 'url(' + src + ')';
});
image.src = src;

これを Promise を返す便利な関数に抽象化できます。

function load(src) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.addEventListener('load', resolve);
        image.addEventListener('error', reject);
        image.src = src;
    });
}

const image = 'http://placekitten.com/200/300';
load(image).then(() => {
   body.style.backgroundImage = `url(${image})`;
});

おすすめ記事