如何在大量其他图像（.css 文件中的 html 元素）之前加载一个小的 css 背景图像？

Question

我想知道你是否可以帮忙。 我有一个小图像（46kb），它目前在 CSS 中是这样调用的：

html {
background: #000 url(../images/background.jpg) repeat fixed;
}

我目前遇到的问题是背景是最后加载的东西。 在我的大多数页面上，我有大约 50 到 150 个 4kb 的小图像（它们是内容图像）。 因此，所有这些图像在背景图像之前首先加载。 虽然这没什么大不了的，因为内容仍然可读，肯定有办法先加载小背景图像吗？

理想情况下，我想使用 CSS 解决方案，但 JS 很好，但不想使用 Jquery。 我尝试了几种方法，但其中相当多的方法需要将图像放置在 HTML 中，这在这种情况下是不可能的。

谢谢。

编辑：只是为了澄清 JQuery，到目前为止我还没有在站点中使用它，因此仅将它用于加载小背景图像似乎有点过分。 是的，html {} 声明位于 CSS 文件的顶部（就在一些重置声明的下方。

Answer 1

背景通常在最后加载。

您可以尝试使用以下方法预加载它们：

body:after{
    display:none;
    content: url(img01.png) url(img02.png) url(img03.png);
}

或者通过使用javascript：

<script>
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();
    img1.src="img01.png";
    img2.src="img02.png";
    img3.src="img03.png";
</script>

或者您也可以使用 jQuery 延迟加载普通图像并执行以下操作：

<script type="text/javascript">
$(document).ready(function() {
    $("#img1").attr("src", "img01.png");
    $("#img2").attr("src", "img02.png");
    $("#img3").attr("src", "img03.png");
});
</script>

当然，javascript 代码应该在站点的标题中。 不是在</body>标签之前的底部，因为它通常被放置。

Answer 2

在显示网页之前使用链接预加载图像、视频和其他内容等项目。 它适用于多种类型的内容。 更多关于它在https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

<link rel="preload" href="img.png" as="image">

Answer 3

你可以放

<img style="display:none;" src="../images/background.jpg" />

在<body>标签的顶部，以便更早地加载它。

资料来源： https : //www.sitepoint.com/community/t/is-there-a-way-i-can-force-my-background-image-to-load-before-the-other-images/4500/ 5 .