如何加快我的网站背景图片的加载速度？
如何加快我的网站背景图片的加载速度？
提问于 2018-09-11 14:04:07
我正在努力提高我的website的性能。在Chrome DevTools中，我看到对bg2.jpg的请求在开始下载时被延迟了。
我认为这是因为我正在使用JavaScript生成网址，并将其设置为CSS中的背景图像，而Chrome浏览器正在剥夺包含此代码的脚本标记。
let bgImgName = "bg" + Math.floor(Math.random() * 5);
...
document.documentElement.style.setProperty("--bgUrl", `url(img/${bgImgName}.jpg)`);我的想法是在超文本标记语言中使用<link rel="preload" href="img/bg2.jpg" as="image">对图像进行preload。我的问题是我必须硬编码URL才能工作(因为我的服务器只运行apache，并且没有真正的服务器端语言)。我的服务器(在Linux共享主机上有GoDaddy的主机)允许我访问.htaccess文件，也许有一种方法可以使用Server Side Includes注入随机数，但我还没有找到这样做的方法。
有没有办法这样做，或者有不同的方法来解决这个问题？
更新：看起来不能使用服务器端包含。我忘记了在将HTML文件上传到服务器之前对它们进行了gzip压缩，这样就可以从磁盘上直接处理压缩的静态文件，从而提高性能。
有没有办法在传递给浏览器的.htaccess文件中添加一个随机数？
回答 1
Stack Overflow用户
发布于 2018-09-11 20:47:17
因为你有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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52269593
复制相关文章
相似问题