使用背景映像載入器

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

要真正確保背景圖像已完全加載，您可以使用不同的技術：

$('').attr('src', 'http://picture .de/image.png').on('load', function() { $(this).remove(); // 防止記憶體洩漏 $('body').css('背景圖片', 'url(http://picture.de/image.png)'); });

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

在普通 JavaScript 中，這可以實現為：

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

您也可以建立一個抽象函數來處理映像載入並傳回一個承諾：

function load(src) { 返回新的 Promise((解決, 拒絕) => { 常量影像=新影像（）； image.addEventListener('載入', 解析); image.addEventListener('錯誤', 拒絕); 圖像.src = src; }); } 常量影像 = 'http://placekitten.com/200/300'; 載入（圖片）.then（（）=> { body.style.backgroundImage = `url(${image})`; });