<link />元素加载完成后执行函数

时间:2010-05-23 01:21:12

标签: javascript jquery

我正在使用jQuery Masonry来布局我的页面,但我使用的是自定义的@ font-face字体。问题是,在加载之前,Masonry不知道字体的度量标准。

Masonry文档建议您使用$(window).load()而不是$(document).ready()来调用布局函数,但我不想等到所有图像等都加载。我可以准确地指定图像的尺寸,因此砌体不需要等到它们被加载。这只是文本的问题。

当字体中链接的<link>元素完成加载时,如何让jQuery调用回调?

编辑:显而易见的解决方案(即$('#link_id').load(...))似乎不起作用。

EDIT2:我没有意识到(我很愚蠢)<link>元素实际上是在样式表中用@ font-face声明进行链接。我想等到加载 font ,而不仅仅是样式表......

2 个答案:

答案 0 :(得分:1)

WebFont loader是执行此操作的正确方法。

答案 1 :(得分:0)

jQuery $(document).ready()事件仅对你有用,如果你想在DOM完成加载后关闭它,忽略是否有任何图像/样式表等设置,所以你最好的选择将会听取该文件的可用性。不幸的是,随着事件的发展,你唯一可能的选择是window.load()事件。

您的情况因许多方面而变得复杂,因为不同的浏览器会以不同的方式处理@ font-face规则。有些人会在应用自定义字体之前呈现所有HTML,有些人会在呈现页面的其余部分之前尽快加载字体。

我最好的建议是确保您在页面底部调用Masonry脚本。这使您有机会在任何脚本开始工作之前加载文档元素。您可能也会分别调查IE和Mozilla的attachEventaddEventListener函数(不确定Webkit浏览器需要什么),尽管您可以绑定的事件类型和您实际需要的事件倾听可能没有被覆盖。

可能不是你想听到的。希望别人比我更有世俗观点。