如何在许多其他图像（.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">