javascript - HTML5 图片预加载

Question

我正在使用以下内容:

 window.addEventListener("load", pageFullyLoaded, false);

function pageFullyLoaded(e) {
// run animation instructions/function here
}

所以当所有对象都在 DOM 中时，图像、脚本等已经完成加载我的动画指令可以被触发。

我现在的问题是关于图像预加载:在我的 CSS 中，我一直在使用以下内容:

 body::after {
 content: url ("sprite.png");
 display: none;
 }

但是，如果 JS 中的加载事件在动画发生之前已经等待所有图像可用，我不太清楚使用或不使用它有什么区别？在 CSS 中使用它有好处吗？

Answer 1

加载事件不关心 CSS。它们可能会或可能不会在加载事件触发时加载；它们可能会或可能不会仅根据要求“延迟加载”。