1

私のサイトのホームページでは、サイトの他のページで使用されているフォントと画像をプリロードして、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%;
}

ありがとう

4

4 に答える 4

2

外部ライブラリを必要としない最も簡単な方法は、プリロード要素を に設定された div に配置することdisplay: noneです。

于 2011-10-12T19:37:19.940 に答える
0

何かをプリロードする必要がある場合は、ページのロード後にページ上の隠し要素に動的に追加する必要があります。Web ページに割り当てられた利用可能な接続を使い果たしたくないため、ユーザーの速度がまったく低下しません。

JavaScript を使用しないユーザーが気になる場合は、非表示の要素をページの最後に配置します。ブラウザーがトップダウンでスタイルをロードし続けると仮定すると、ページの残りの部分が遅くなることはありません。

画像の場合は、スプライト シートを試してみてください。それらはあなたのユースケースでうまくいくかもしれません。

ファイルの圧縮やキャッシュ設定など、他にも確認できることがあります。

ソリューションを理解したら、Fiddler をロードして、サイトが期待どおりに機能していることを確認します。

于 2011-10-12T19:44:52.140 に答える
-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>

IE用のCSS

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

確かに、同じ方法でフォントをプリロードできます。

于 2011-10-12T19:47:23.953 に答える