استخدام أداة تحميل صور الخلفية

أنت تحاول التحقق من تحميل صورة الخلفية عن طريق تعيين صورة خلفية على علامة الجسم ثم استخدم وظيفة التحميل (). ومع ذلك، لا يعمل هذا الأسلوب بشكل فعال مع صور الخلفية.

للتأكد من تحميل صورة الخلفية بالكامل، يمكنك استخدام تقنية مختلفة:

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

تقوم هذه الطريقة بإنشاء صورة جديدة في الذاكرة وإرفاق مستمع حدث التحميل بها. بمجرد تحميل الصورة، يتم تشغيل حدث التحميل، ويتم تعيين صورة الخلفية على علامة النص.

في JavaScript الفانيليا، يمكن تنفيذ ذلك على النحو التالي:

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

يمكنك أيضًا إنشاء دالة مجردة للتعامل مع تحميل الصورة وإرجاع الوعد:

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

يسمح لك هذا الأسلوب بالتحقق بشكل موثوق من اكتمال تحميل صورة الخلفية ويضمن تنفيذ التعليمات البرمجية فقط بمجرد تحميل الصورة بالكامل.