Bagaimana untuk Memastikan Imej Latar Belakang Dimuatkan Sebelum Menggayakan Badan?

Cara Semak sama ada Imej Latar Belakang Dimuatkan

Untuk memastikan imej latar belakang dimuatkan sepenuhnya sebelum menjalankan sebarang kod, seperti sebagai mengubah penggayaan tag badan, pendekatan alternatif diperlukan. Berikut ialah penyelesaian terperinci:

1. Mencipta Objek Imej:

const image = new Image();

2. Menetapkan Sumber Imej:

image.src = 'http://picture.de/image.png';

3. Menggunakan Acara Muatan:

image.addEventListener('load', function() {
  // Code to be executed after the image is loaded
});

4. Memohon Imej Latar Belakang:

Selepas imej dimuatkan, anda boleh meneruskan untuk menerapkannya sebagai imej latar belakang:

const body = document.querySelector('body');
body.style.backgroundImage = `url('${image.src}')`;

5. Menggunakan Penyelesaian Berasaskan Janji:

Untuk pendekatan yang lebih berstruktur, fungsi berasaskan janji boleh digunakan:

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.addEventListener('load', () => resolve(image));
    image.addEventListener('error', () => reject(`Failed to load image: ${src}`));
    image.src = src;
  });
}

loadImage('http://picture.de/image.png').then(image => {
  body.style.backgroundImage = `url('${image.src}')`;
});

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Imej Latar Belakang Dimuatkan Sebelum Menggayakan Badan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!