jQuery .load() 直到回调函数完成后才开始加载 CSS 背景图像

Question

*注意：这与 img 标签无关。这完全是一个关于 CSS 背景图像的问题。

我正在尝试制作一个不错的基于 ajax 的模板，它不会刷新页面，而是交换特定 div 中的内容。一切都运行良好，除了背景图像在新加载的 div 显示给用户时从未完全加载。我希望这个过程看起来像这样：

1. HTML 内容已加载。
2. CSS 图像开始异步加载。
3. 回调函数运行完成。

为了测试，我推迟了展示，只是为了确保图像在函数完成之前有时间加载。即使有 5 秒的额外时间，它仍然会在加载前显示一秒钟的空白框，无论延迟多长时间。这使我得出结论，流程必须更像这样：

1. HTML 内容已加载。
2. 回调函数运行完成。
3. CSS 图像开始异步加载。

“加载”事件似乎没有考虑 CSS 图像，并且似乎没有任何事件允许脚本等待 CSS 图像完成加载。

我什至尝试通过遍历每个元素来绕过它，检查背景图像的存在，然后为每个元素创建一个带有加载事件的新 Image()，但是不用说，这超出了调用堆栈。

所以我的问题是，在继续执行脚本之前，我如何才能简单地等待所有背景图像完全显示？

Answer 1

只有将 CSS 真正应用到元素后，它才会加载图像和其他外部资源。加载<img> 标签更容易处理（参见this question and answer）。但是，您可以通过使用 HTML、CSS 或 JS 中的几种不同方法之一，利用缓存并强制在调用 .load() 之前加载图像，如下所示：

HTML：为每张图片添加一个 HTML 标签到您的赞<link rel="prefetch" href="image.png">

CSS：将所有图像加载到初始加载时存在的某个隐藏元素中（参见this answer）。

JS：您可以让 JS 在页面加载时加载每个图像（请参阅this answer）

无论您选择哪种方法，您都需要指定要预加载的图像。这些解决方案都不会自动从 CSS 中获取图像路径。

注意：这些方法中的每一种都可能具有不同的跨浏览器支持。我建议在使用其中任何一个之前仔细检查您的项目要求。