Question

我有动画展示广告，其中一些页面元素是大图片，以index.html标头内的样式提供，形式为background-image: url('huge-image.png');。是否有任何优雅的方法可以阻止javascript动画库（greensock gsap）的执行，直到所有这样的资产会显示出来吗？

Answer 1

似乎window load事件可能正在等待背景图像。 spec表示必须在加载所有个依赖资源后将其触发，一项快速实验表明该背景包括背景图像。所以

window.addEventListener("load", function() {
    // All loaded now.
});

但是，如果我弄错了，这是一个备用：

我不知道它是否优雅，但是由于找不到任何暗示背景图像已加载的事件，因此可以使用高度为零的img元素具有相同的网址，并检测何时加载那些；届时，图片应位于缓存中并可用作背景。

假设您在imageNames中有一个图像名称数组：

let loaded = 0;
function imgLoadedOrFailed() {
    if (++loaded === imageNames.length) {
        // They're all loaded now!
    }
}
imageNames.forEach(name => {
    const img = document.createElement("img");
    img.onload = imgLoadedOrFailed;
    img.onerror = imgLoadedOrFailed;
    img.src = name;
});

Answer 2

我认为body标签上的onload属性可以为您提供帮助

<body onload="fun()">

然后您可以在fun（）函数中包装JavaScript

function fun(){
 // Your Code goes here
}

或者如果它不起作用

您可以使用setTimeout函数至少等待大约10秒的时间

像这样-

setTimeout(()=>{
 // Your Code goes here
}, 10000); // 10000 milliseconds = 10 seconds

希望它对您有帮助

在下载，缓存和显示所有CSS背景图像之前，如何不执行任何JavaScript？

2 个答案: