Javascript 强制在加载其他背景图像之前加载背景图像

是否有办法在下载其他图像之前强制下载特定图像（优先级图像）

我用了很多背景图片。我的登录页有一个渐变填充，用作登录页的第二个图像

登录页CSS:

.bg-img1::before {
  background-image: url(https://mywebsite/images/myimage.jpg), linear-gradient(to top, #206020, white);
  background-size: cover, cover;
}

我从使用DOM ready detection切换到在下载登录页图像之前3或4秒显示背景图像渐变

$(function() {
    // DOM ready, but image hasn't downloaded yet.
});

现在我使用window.onload，一切正常，但我添加了越来越多的图像，下载延迟变得越来越大

window.onload = function() {
  // delay, delay... finally my landing page with gradient displays
});

---

为了重申我的问题，我希望能够优先下载我的登录页。如果我切换回使用DOM ready，是否有办法确保在显示渐变之前显示背景图像？

添加图像标记并将源放在其中。确保将“显示无”添加到此标记。将此标签放置在身体标签的上方。这应该优先考虑您的图像加载。希望这对你有用。

也许我为你编写的脚本能如你所料发挥作用。使用JS无法设置CSS伪元素，例如

：before

我所做的是更改代码，使其在图像容器中提供img URL作为

data

属性

然后使用JavaScript隐藏所有图像容器并开始动态创建新图像，然后将src属性设置为

节

元素的

数据img

的值

最后，我监听

load

和

error

事件，然后再次显示容器。通过这种方式，您可以确保它已加载到浏览器中的图像，因此，当显示它的图像容器时，图像将已就位

(
函数（$，窗口，未定义）{
var img_container=null；
var img_loaded=0；
var hide_img_containers=函数hide_img_containers（）{
如果（0
.img\u容器{
最小高度：250px；
位置：相对位置；
}
.img_容器：之前{
内容：''；
显示：块；
宽度：100%；
身高：100%；
排名：0；
左：0；
位置：绝对位置；
}
#第1节：之前{
背景图片：url(http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0786.jpg)，线性梯度（至顶部，#206020，#fff）；
背景尺寸：封面，封面；
}
#第2节：之前{
背景图片：url(http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0357.jpg)，线性梯度（至顶部，#206020，#fff）；
背景尺寸：封面，封面；
}
#第3节：之前{
背景图片：url(http://www.lifeofpix.com/wp-content/uploads/2016/05/Life-of-Pix-free-stock-street-lights-wall-PaulJarvis.jpg)，线性梯度（至顶部，#206020，#fff）；
背景尺寸：封面，封面；
}
#第4节：之前{
背景图片：url(http://www.lifeofpix.com/wp-content/uploads/2017/03/1-276.jpg)，线性梯度（至顶部，#206020，#fff）；
背景尺寸：封面，封面；
背景位置：50%50%；
}
这就完成了它将要出现的技巧。我使用内联样式显示：无。