Question

在我网站的主页上，我想预先加载网站其他网页上使用的字体和图片，以避免使用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%;
}

由于

Answer 1

最简单的方法，不需要外部库，是将预加载元素放在div设置为display: none。

Answer 2

如果您需要预加载某些内容，则应在页面加载后将其动态添加到页面上的隐藏元素中。然后，您不会因为不想用完分配给您网页的可用连接而放慢用户的速度。

如果你关心非JavaScript用户，我会把隐藏的元素放在页面上的最后一件事上。假设浏览器继续以自上而下的方式加载样式，这不会减慢页面的其余部分。

对于图像，您可能需要尝试spritesheets。它们可能在您的用例中运行良好。

您还可以查看其他内容，例如文件的压缩和缓存设置。

一旦您认为已经找到解决方案，请加载Fiddler并验证网站是否按预期执行。

Answer 3

好消息; 有一个规范和方式以声明方式做到：

<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提到的那样，你需要在主页上有一个极低的跳出率，以良心做到这一点。

Answer 4

对于您的图片：

<强>的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 for IE

#preload {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

当然你可以用同样的方式预加载字体。

预加载字体和图像？

4 个答案: