Question

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

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

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

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

Answer 1

我找到的最佳解决方案是在文档就绪时加载tinyscrollbar并在窗口加载时更新它。

<script type="text/javascript">
   jQuery(document).ready(function() {
        jQuery('#scrollbar1').tinyscrollbar({ sizethumb: 50 });
    });
   jQuery(window).load(function () {
        jQuery('#scrollbar1').tinyscrollbar_update();
    });
</script>

Answer 2

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

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

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

如果您正在使用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>

当TypeKit处于active状态时，你想要调用tinyscollbar。

在我的自定义字体之前加载Tinyscrollbar并计算错误的内容高度

2 个答案: