在我网站的主页上，我想预加载网站其他页面上使用的字体和图像，以避免 FOUC。
最好的方法是什么？
对于字体，我目前在我的主页上有此代码，但我确信有更好的方法。
<div id="font-load1">aaa</div>
<div id="font-load2">aaa</div>
然后在style.css中隐藏文字：
#font-load1{
font-family:"BellMTItalic";
font-style:italic;
text-indent: -900%;
}
#font-load2{
font-family:"SavoyeLETPlain";
text-indent: -900%;
}
谢谢
【问题讨论】：
标签： javascript css font-face preload preloading
好消息； 有一个规范和声明方式：
<link rel="preload" href="/path/to/font/BellMTItalic.woff2" as="font" type="font/woff2">
<link rel="preload" href="/path/to/font/SavoyeLETPlain.woff2" as="font" type="font/woff2">
https://w3c.github.io/preload/
http://www.bramstein.com/writing/preload-hints-for-web-fonts.html
坏消息：
仅受 Chrome 和 Opera 支持（2016 年 10 月）：
http://caniuse.com/#search=preload
正如@brad 所提到的，您需要在主页上获得极低的跳出率才能有良心地做到这一点。
【讨论】：
为您的图片：
JavaScript
function preload() {
imageObj = new Image();
images = new Array();
images[0] = 'img/1.png';
images[1] = 'img/2.png';
images[2] = 'img/3.png';
images[3] = 'img/4.png';
images[4] = 'img/5.png';
for (i = 0; i <= 4; i++)
imageObj.src = images[i];
}
HTML
<body onload="preload();">
....
<!--[if IE]>
<div id="preload">
<img src="img/1.png" width="1" height="1" alt="" />
<img src="img/2.png" width="1" height="1" alt="" />
<img src="img/3.png" width="1" height="1" alt="" />
<img src="img/4.png" width="1" height="1" alt="" />
<img src="img/5.png" width="1" height="1" alt="" />
</div>
<![endif]-->
</body>
IE 的 CSS
#preload {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
当然你可以用同样的方式预加载字体。
【讨论】：
如果您需要预加载某些内容，则应在页面加载后将其动态添加到页面上的隐藏元素中。这样您就不会减慢用户的速度，因为您不想用完分配给您网页的可用连接。
如果您关心非 JavaScript 用户，我会将隐藏元素放在页面上的最后一件事。假设浏览器继续以自上而下的方式加载样式，这不会减慢页面的其余部分。
对于图像，您可能想尝试 spritesheets。它们可能适用于您的用例。
您还可以查看其他内容，例如文件的压缩和缓存设置。
一旦您认为自己找到了解决方案，请加载 Fiddler 并验证该网站是否按预期运行。
【讨论】：
不需要外部库的最简单方法是将预加载元素放在设置为display: none 的 div 中。
【讨论】：