Bagaimana untuk Memastikan Imej Latar Belakang Dimuatkan Sebelum Pelaksanaan Kod?

Memastikan Pemuatan Imej Latar Belakang Sebelum Pelaksanaan Kod

Memasukkan imej latar belakang ke dalam teg badan dan memulakan pelaksanaan kod seterusnya boleh menimbulkan cabaran apabila menentukan jika imej telah dimuatkan sepenuhnya. Menggunakan fungsi load() konvensional, seperti yang dilihat dalam contoh yang disediakan, tidak akan mencukupi.

Penyelesaian:

Untuk mengatasi halangan 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)');
});

Kod ini mencipta imej baharu dalam ingatan, menggunakan peristiwa pemuatan untuk mengesan apabila imej sumber telah dimuatkan. Dengan mengalih keluar imej selepas dimuatkan, kemungkinan kebocoran memori dapat dielakkan.

Pelaksanaan JavaScript Vanila:

Untuk JavaScript vanila, penyelesaiannya dalam bentuk berikut:

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

Abstraksi Berasaskan Janji:

Kepada abstrak proses, fungsi berguna boleh dibuat, 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(() => {
   body.style.backgroundImage = `url(${image})`;
});

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