预加载字体和图像？

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

感谢

来源

2011-10-12 fxfuture

不要这样做，除非你有很好的理由。除非他们访问其他页面，否则你会浪费每个人的带宽。 – Brad

[Preload @ Font-Face Fonts停止Firefox闪烁/延迟]的可能重复（http://stackoverflow.com/questions/3379645/preload-font-face-fonts-to-stop-firefox-flicker-delay） – JJJ

最简单的方法，无需外部库，是把你的预紧力元素一个div设为display: none。

来源

2011-10-12 19:37:19 knite

经过测试，它不适用于字体。我想如果div是隐藏的，它不会渲染它？ – fxfuture

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

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

对于图像，您可能想尝试使用spritesheets。他们可能在你的用例中运行良好。

还有其他的东西，你也可以看看你的文件的压缩和缓存设置。

一旦您认为自己的解决方案计算出来了，请加载Fiddler并验证该网站是否按预期运行。

来源

2011-10-12 19:44:52 scottheckel

-1

为你的形象：

的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>

CSS为IE

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

当然，您可以用相同的方式预加载字体。

来源

2011-10-12 19:47:23

好消息; 有一个规范和办法做到这一点声明：

<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提到的，你需要有自己的主页上极低bouncerate问心无愧做到这一点。

来源

2016-10-08 20:01:05 EoghanM