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

コードの実行前に背景画像が確実に読み込まれるようにするにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-17 08:07:03

オリジナル

679 人が閲覧しました

How to Ensure a Background Image Loads Before Code Execution?

コード実行前に背景画像を確実に読み込む

背景画像を 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)');
});

ログイン後にコピー

このコードは、ソースイメージがロードされたことを検出するロードイベントを利用して、メモリ内に新しいイメージを作成します。ロード後にイメージを削除することで、潜在的なメモリリークが回避されます。

バニラ JavaScript 実装:

バニラ 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 サイトの他の関連記事を参照してください。