CODEWITHSUNDEEP
javascriptcssfont-facepreloadpreloading
fxfuture
fxfuture

Reputation: 1950

Preloading fonts and images?

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

Upvotes: 1

Views: 2609

Answers (4)

EoghanM
EoghanM

Reputation: 26924

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.

Upvotes: 0

GG.
GG.

Reputation: 21844

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.

Upvotes: -1

scottheckel
scottheckel

Reputation: 9244

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.

Upvotes: 0

knite
knite

Reputation: 6171

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

Upvotes: 2

Related Questions