Bagaimana untuk Menentukan sama ada Imej Latar Belakang Telah Dimuat Sepenuhnya dalam JavaScript?

Menentukan Status Memuatkan Imej Latar Belakang

Dalam pembangunan web, menetapkan imej latar belakang pada pelbagai elemen, seperti tag badan, adalah amalan biasa. Walau bagaimanapun, memastikan imej telah dimuatkan sepenuhnya sebelum melaksanakan kod berikutnya boleh menjadi satu cabaran.

Untuk menangani isu ini, pertimbangkan pendekatan berikut:

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

Kaedah ini mencipta elemen imej yang tidak kelihatan dalam ingatan dan memberikan URL imej latar belakang yang dikehendaki kepada atribut sumbernya. Dengan mendengar acara pemuatan, anda boleh mengesan apabila imej telah dimuatkan sepenuhnya dan kemudian menggunakannya sebagai imej latar belakang untuk elemen yang ditentukan.

Dalam JavaScript, kod tersebut akan dipaparkan sebagai:

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

Sebagai alternatif, anda boleh mengabstrakkan fungsi ini ke dalam fungsi yang mengembalikan 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(() => {
    document.body.style.backgroundImage = `url(${image})`;
});

Pendekatan ini membolehkan anda mengendalikan imej proses memuatkan secara tak segerak dan bersyarat melakukan tindakan seterusnya hanya apabila imej tersedia.

Atas ialah kandungan terperinci Bagaimana untuk Menentukan sama ada Imej Latar Belakang Telah Dimuat Sepenuhnya dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!