預加載字體和圖像？

在我網站的主頁上，我想預先加載在網站其他頁面上使用的字體和圖像，以避免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