javascript - 如何加快网站背景图片的加载速度？

Question

我正在尝试提高我的 website 的性能.在 Chrome DevTools 中，我看到对 bg2.jpg 的请求在开始下载时被延迟。

我认为发生这种情况是因为我使用 JavaScript 生成 URL 并将其设置为 CSS 中的背景图像，而 Chrome 浏览器正在降低包含此代码的脚本标签的优先级。

let bgImgName = "bg" + Math.floor(Math.random() * 5);
...
document.documentElement.style.setProperty("--bgUrl", `url(img/${bgImgName}.jpg)`);

我的想法是preload使用的图像，<link rel="preload" href="img/bg2.jpg" as="image">在 HTML 中。我的问题是我必须硬编码 URL 才能工作(因为我的服务器只运行 apache，没有真正的服务器端语言)。我的服务器(在 Linux 共享主机上与 GoDaddy 一起托管)确实允许我访问 .htaccess 文件，并且可能有一种方法可以使用 Server Side Includes注入(inject)随机数，但我还没有找到执行此操作的方法。

有没有办法这样做，或者有不同的方法来解决这个问题？

更新: 看来我无法使用服务器端包含。我忘记了在将 HTML 文件上传到服务器之前对它们进行 gzip 压缩，以便直接从磁盘提供压缩的静态文件可以提高性能。

有没有办法在传递给浏览器的 .htaccess 文件中添加一个随机数？

Answer 1

因为您有 5 张随机图片，一个简单的方法是使用 CSS 并将它们作为任何元素的背景，尺寸为 0。这将强制浏览器在到达 JS 脚本之前加载图像。当然，CSS 需要在您的 JS 之前加载，并尽快加载。

所以你的代码可以是这样的:

html {
  background-image:
    url("img/bg1.jpg"),
    url("img/bg2.jpg"),
    url("img/bg3.jpg"),
    url("img/bg4.jpg"),
    url("img/bg5.jpg");
  background-size:0 0;
}