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

我想知道你是否能帮忙。我有一个小图像（46kb），目前在CSS中被称为：

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

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

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

谢谢

---

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

背景通常在最后加载

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

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>

var img1=新图像（）；
var img2=新图像（）；
var img3=新图像（）；
img1.src=“img01.png”；
img2.src=“img02.png”；
img3.src=“img03.png”；

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

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

$（文档）.ready（函数（）{
$（“#img1”）.attr（“src”、“img01.png”）；
$（“#img2”）.attr（“src”、“img02.png”）；
$（“#img3”）.attr（“src”、“img03.png”）；
});

当然，javascript代码应该放在站点的标题中，而不是像通常那样放在

标记之前的底部

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

在

标记的顶部，使其更早加载

---

来源：。

在显示网页之前，使用链接预加载图像、视频和其他内容等项目。它适用于多种类型的内容。有关详细信息，请参阅

如果您不介意我问的话，您不想使用jQuery的原因是什么？我知道它只是一个库，但它是一个强大的库。html{}-CSS文件开头的声明？我可以想象，文件是以声明的方式加载的。你能将该声明作为

head

中的

style

标记添加到

head

中的其余标记之前吗？不确定它是否有效，但这只是一个建议。不确定这是否有效，但你可以尝试请创建两个css文件，一个非常小，只有html规则和背景图像，另一个大的包含所有其他css规则。然后先加载小的一个。抱歉，我没有时间先尝试这个。我以前尝试过你的第二个解决方案，但不起作用。查看头部部分中的文件，我包含了一个加载我的sty的文件lesheets，然后包括一个执行任何javascript函数的文件，这个脚本所在的位置。我注意到，如果我交换这些函数，那么javascript函数首先出现，这是可行的。但是，这似乎在ie6中造成了一个恼人的问题，它只会在加载页面上的所有图像后加载页面。请将原始订购回来后，它在IE6中再次工作，但显然不再在firefox中工作了！令人讨厌！解决了问题，出于某种原因IE6不喜欢我在@fontface{}中的一个声明。删除该选项后，它在两种浏览器中都能正常工作。标记为正确答案，就好像是因为我的样式表和js函数错误，这让我走上了正确的道路。谢谢。

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