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

背景画像の読み込みステータスの確認

Web 開発では、body タグなどのさまざまな要素に背景画像を設定します。は一般的な習慣です。ただし、後続のコードを実行する前に画像が完全にロードされていることを確認するのは難しい場合があります。

この問題に対処するには、次のアプローチを検討してください。

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

このメソッドは、非表示の画像要素を作成します。をメモリ内に保存し、目的の背景画像 URL をそのソース属性に割り当てます。ロード イベントをリッスンすることで、画像が完全にロードされたことを検出し、それを指定された要素の背景画像として適用できます。

JavaScript では、コードは次のように表示されます:

const src = 'http://picture.de/image.png';
const image = new Image();
image.addEventListener('load', function() {
    document.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(() => {
    document.body.style.backgroundImage = `url(${image})`;
});

このアプローチにより、画像の読み込みプロセスを処理できるようになります。画像が利用可能な場合にのみ、後続のアクションを非同期かつ条件付きで実行します。

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