javascript - 预加载字体和图像?

  显示原文与译文双语对照的内容
0 0

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

谢谢

时间: 原作者:

0 0

最简单的方法是无需外部库,而是将预加载元素放在 display: none 集中。

原作者:
0 0

如果需要预加载某些内容,则应在页加载后动态将它的添加到页上的隐藏元素。 然后,你将根本不会减慢用户,因为你不想使用可以用的连接alloted到你的网页。

如果你关心非javascript用户,我将把隐藏的元素放在页面上的最后一个。 假设浏览器继续加载上下文中的样式,这将不会降低页面的它的余部分。

对于图像,你可能想要尝试 spritesheets 。 他们在你的用例中可能工作得很好。

你还可以看到它的他的事情,如压缩和缓存文件的设置。

一旦你认为你的解决方案已经解决了,请加载assert并验证该站点是否正常执行。

原作者:
0 0

对于你的图像:

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;
}

当然你可以用同样的方式预加载字体。

原作者:
...