背景画像が読み込まれたことをどのように検出できますか?

背景画像の読み込みステータスの検出

body タグの背景画像の読み込みが成功したときにコードをトリガーしたいと考えていますか?このとらえどころのない問題の解決策を紹介します。

$().load() を使用する最初のアプローチは、背景画像を除く DOM 要素に制限されているため失敗します。代わりに、次の戦略を採用します。

1. 新しい画像要素を作成し、その src 属性をターゲットの背景画像の URL と一致するように設定します。
2. 「load」イベント リスナーを利用してキャプチャします。画像の読み込みの完了。

jQuery では、このテクニックは次のように変換されます。

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

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