Bagaimanakah Saya Boleh Mengesan Apabila Imej Latar Belakang Telah Dimuatkan?

Mengesan Status Muatan Imej Latar Belakang

Bercita-cita untuk mencetuskan beberapa kod apabila berjaya memuatkan imej latar belakang tag badan? Memperkenalkan penyelesaian kepada masalah yang sukar difahami ini:

Pendekatan awal menggunakan $().load() gagal kerana pengehadannya kepada elemen DOM, tidak termasuk imej latar belakang. Sebaliknya, kami menggunakan strategi berikut:

1. Buat elemen imej baharu dan tetapkan atribut srcnya agar sepadan dengan URL imej latar belakang sasaran.
2. Gunakan pendengar acara 'muat' untuk menangkap selesai memuatkan imej.

Dalam jQuery, teknik ini menterjemah kepada:

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

Melaksanakan logik ini dalam JavaScript Vanila:

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

Tingkatkan kod anda dengan merangkum fungsi ini ke dalam fungsi mudah yang menghasilkan janji:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Apabila Imej Latar Belakang Telah Dimuatkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!