Bagaimana untuk memeriksa dengan pasti sama ada Imej Latar Belakang Telah Dimuatkan?

Menggunakan Pemuat Imej Latar Belakang

Anda cuba menyemak sama ada imej latar belakang telah dimuatkan dengan menetapkan imej latar belakang pada teg badan dan kemudian menggunakan fungsi load(). Walau bagaimanapun, pendekatan ini tidak berfungsi dengan berkesan untuk imej latar belakang.

Untuk benar-benar memastikan imej latar belakang telah dimuatkan sepenuhnya, anda boleh menggunakan teknik yang berbeza:

$('<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 imej baharu dalam ingatan dan melampirkan pendengar acara beban padanya. Setelah imej dimuatkan, peristiwa pemuatan dicetuskan dan imej latar belakang ditetapkan pada teg badan.

Dalam JavaScript vanila, ini boleh dilaksanakan sebagai:

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

Anda boleh juga mencipta fungsi abstrak untuk mengendalikan pemuatan imej dan 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})`;
});

Pendekatan ini membolehkan anda menyemak dengan pasti untuk melengkapkan imej latar belakang memuatkan dan memastikan bahawa kod hanya dilaksanakan sebaik sahaja imej dimuatkan sepenuhnya.

Atas ialah kandungan terperinci Bagaimana untuk memeriksa dengan pasti sama ada Imej Latar Belakang Telah Dimuatkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!