javascript - 如何在许多其他图像(.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> 之前的底部通常放置的标记。