Preloading fonts and images?

Question

On the home page of my site I'd like to preload fonts and images that are used on other pages of the site, to avoid FOUC's.

What's the best way to do this?

For fonts I currently have this code on my homepage but I'm sure there's a better way.

<div id="font-load1">aaa</div>
<div id="font-load2">aaa</div>

And then in style.css to hide the text:

#font-load1{
    font-family:"BellMTItalic";
    font-style:italic;
    text-indent: -900%;

}
#font-load2{
    font-family:"SavoyeLETPlain";
    text-indent: -900%;
}

Thanks

Don't do this, unless you have a very good reason. You're wasting everyone's bandwidth unless they visit the other pages. — Brad, Oct 12 '11 at 19:37
possible duplicate of [Preload @Font-Face Fonts to stop Firefox Flicker/Delay](http://stackoverflow.com/questions/3379645/preload-font-face-fonts-to-stop-firefox-flicker-delay) — JJJ, Oct 12 '11 at 19:37

score 2 · Answer 1 · answered Oct 12 '11 at 19:37

2

The simplest method, requiring no external libraries, is to place your preload elements in a div set to display: none.

answered Oct 12 '11 at 19:37

knite

6,033
6
38
54

1

tested this and it doesn't work for fonts. I thought if the div was hidden, it doesn't render it? – fxfuture Oct 13 '11 at 00:19

score 0 · Answer 2 · answered Oct 08 '16 at 20:01

The good news; There's a spec and way to do it declaratively:

<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

The Bad news:

Only supported by Chrome and Opera (Oct 2016):

http://caniuse.com/#search=preload

And as @brad mentioned, you'd need to have an extremely low bouncerate on your homepage to do this with a good conscience.

score 0 · Answer 3 · answered Oct 12 '11 at 19:44

If you need to preload something, you should dynamically add it to a hidden element on the page after page load. Then you will not slow down the user at all as you do not want to use up the available connections alloted to your webpage.

If you care about non-JavaScript users, I would place the hidden elements as the last thing on the page. Assuming browsers continue to load the styles in a top-down matter this will not slow down the rest of the page.

For images, you may want to try spritesheets. They may work well in your use case.

There are other things that you can look at too like compression and caching settings of your files.

Once you think you have your solution figured out, load up Fiddler and verify that the site is performing as you expected.

GG. · Answer 4 · 2011-10-13T07:51:55.663

For your images :

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

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

Surely you can preload the fonts in the same way.

Preloading fonts and images?

4 Answers4