Javascript 如何加快网站背景图像的加载速度？

我正在努力提高我的团队的绩效。在Chrome开发工具中，我看到对bg2.jpg的请求在开始下载时被延迟

我想这是因为我正在使用JavaScript生成URL并将其设置为CSS中的背景图像，而Chrome浏览器正在取消包含此代码的脚本标记的优先级

让bgimname=“bg”+Math.floor（Math.random（）*5）；
...
document.documentElement.style.setProperty（“--bgUrl”，“url（img/${bgimname}.jpg）`）；

---

我的想法是在HTML中使用，

来创建图像。我的问题是，我必须对URL进行硬编码才能使其工作（因为我的服务器只运行apache，没有真正的服务器端语言）。我的服务器（Linux共享主机上带有GoDaddy的主机）确实允许我访问.htaccess文件，可能有一种方法可以用来注入随机数，但我还没有找到一种方法

有没有一种方法可以这样做，或者有一种不同的方法来解决这个问题

更新：看起来我无法使用服务器端包含。我忘了在将HTML文件上传到服务器之前我已经对它们进行了gzip处理，这样就可以从磁盘上提供压缩的静态文件，从而提高性能

---

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

由于您有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;
}

---

谁是你的主机提供商？检查之后，我从S3上的静态托管网站获得了类似的响应时间。但是我目前工作的站点在EC2上使用Nginx提供图像的速度要快得多（205ms中为183kbpng）。在Linux共享主机上使用GoDaddy我知道我的主机可能会慢得多，但是在浏览器尝试下载图像之前，网络选项卡上有一个很大的空白，应该有办法减少这个空白。从初始图像开始是不可能的吗？例如，你可以从

img0.jpg

开始，然后从那里随机化…我可以这样做，但是随机化并不是自动发生的，我不认为页面日志上的人会足够让我合理地触发自动切换到另一个随机背景。虽然这会起作用，但它会导致所有5张图片下载，而不是我需要的1张，从而消耗额外的资源。这实际上会延迟页面的加载，因为浏览器每个子域只能下载6个资源，并且当您将此资源与页面上的其他资源结合使用时，会导致最后几个图像被阻止，直到6个连接中的一个变为空闲。浏览器加载指示器不会停止，直到页面上的所有资源都被加载。@Eric您真的需要5个背景图像吗？如果性能是您的目标，那么此功能可能会被削弱。或者投资一些服务器端解决方案。你的权利，我可以删除该功能并坚持使用1个背景图像，但我宁愿接受性能测试，也不愿删除它，因为slight基本上是我尝试新web技术的游乐场。它在当前状态下加载得相当快。仅仅在代码中插入一个值，服务器端解决方案就显得有些过分了。