当前位置： 文江博客话题详情

预加载字体和图像？

发布于 2024-12-09 12:42:39 字数 449 浏览 1 评论 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%;
}

谢谢

原文

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

ペ泪落弦音 2024-12-16 12:42:39

最简单的方法（不需要外部库）是将预加载元素放置在设置为 display: none 的 div 中。

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

回复 原文
如梦 2024-12-16 12:42:39

如果您需要预加载某些内容，则应该在页面加载后将其动态添加到页面上的隐藏元素中。这样您就不会减慢用户的速度，因为您不想用完分配给您的网页的可用连接。

如果您关心非 JavaScript 用户，我会将隐藏元素放置在页面的最后。假设浏览器继续以自上而下的方式加载样式，这不会减慢页面的其余部分。

对于图像，您可能想尝试 spritesheet。它们可能在您的用例中运行良好。

您还可以查看其他内容，例如文件的压缩和缓存设置。

一旦您认为您已经找到了解决方案，请加载 Fiddler 并验证该站点是否按您的预期运行。

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.

回复 原文
叫思念不要吵 2024-12-16 12:42:39

好消息；
有一个规范和方法可以以声明方式执行此操作：

<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 提到的，你需要使您的主页具有极低的跳出率，以良心做到这一点。

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.

回复 原文
乖乖 2024-12-16 12:42:39

对于您的图像：

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

当然，您可以以相同的方式预加载字体。

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.

回复 原文
~没有更多了~

关于作者

忘你却要生生世世

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文