0

我在我的网站上使用带有自定义字体的 tinyscrollbar.js。在自定义字体加载完成之前脚本执行的问题，导致内容高度计算错误，部分内容在滚动区域的末端被削减。

我为此找到的唯一解决方案是使用 window.load() 而不是 document.ready() 函数加载脚本。

此解决方案的问题是滚动条在加载所有页面之前无法工作，包括不属于滚动区域内主要内容的图像。

我考虑过在字体 url 上使用 load 事件，但是每个浏览器都有一个字体文件，所以这也行不通。任何帮助请。

4

2 回答 2

2

我为此找到的最佳解决方案是在准备好的文档上加载 tinyscrollbar 并在窗口加载时更新它。

<script type="text/javascript">
   jQuery(document).ready(function() {
        jQuery('#scrollbar1').tinyscrollbar({ sizethumb: 50 });
    });
   jQuery(window).load(function () {
        jQuery('#scrollbar1').tinyscrollbar_update();
    });
</script>
于 2012-10-31T04:56:59.767 回答
0

您可以尝试在 tinyscrollbar.js 上设置超时。只需调整“400”数字，直到它在正确的时间加载。

$(document).ready(function() {
setTimeout(function() {
//Call tinyscrollbar here   
}, 400)
});

更好的方法是等到字体加载的确切时刻。例如，TypeKit 提供了三个回调，其中一个允许您在字体全部加载后立即调用另一个脚本：http: //blog.typekit.com/2010/10/18/more-control-with-typekits -字体事件/。

如果您使用的是 Typekit，这是他们提供的示例：

<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">
 try {
   Typekit.load({
     loading: function() {
       // Javascript to execute when fonts start loading
     },
     active: function() {
       // Javascript to execute when fonts become active
     },
     inactive: function() {
       // Javascript to execute when fonts become inactive
     }
   })
 } catch(e) {}
 </script>

active当 TypeKit 处于该状态时，您会想调用 tinyscollbar 。

于 2012-10-09T04:45:15.483 回答