背景画像が読み込まれたかどうかを確実に確認するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-16 06:54:02

オリジナル

926 人が閲覧しました

How to Reliably Check if a Background Image Has Loaded?

背景画像ローダーの使用

body タグに背景画像を設定して、背景画像が読み込まれたかどうかを確認しようとしています次に、load() 関数を使用します。ただし、このアプローチは背景画像に対して効果的に機能しません。

背景画像が完全にロードされたことを確実にするには、別の手法を利用できます。

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

ログイン後にコピー

このメソッドは、メモリ内の新しいイメージをロードし、それにロードイベントリスナーをアタッチします。画像が読み込まれると、load イベントがトリガーされ、背景画像が body タグに設定されます。

バニラ 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})`;
});

ログイン後にコピー

このアプローチにより、背景画像を読み込み、画像が完全に読み込まれた場合にのみコードが実行されるようにします。

以上が背景画像が読み込まれたかどうかを確実に確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。