加载所有页面资源时存储DOM元素的偏移量/位置

Question

我有一个DOM元素，我存储的偏移位置。例如：

$element.data('offset', $element.offset().top);

但是，由于该页面使用Web字体并且HTML中没有明确的width或height属性，因此页面长度实际上会随着这些项目的加载而增加。

因此，如果在完全加载所有资源之前运行此代码，则偏移量将不同。例如，如果Web字体仍在加载，则为500，如果所有内容都已加载，则为1000。

我尝试过使用jQuery load函数。这改善了这种情况，只有在页面完全加载大约70％的时间后才存储偏移量。但是，我需要100％的准确度。

怎么能解决这个问题？

Answer 1

使用Google WebFont Loader，即active()回调。加载程序支持Google以外的字体库，因此您可以加载自己的字体：

https://developers.google.com/webfonts/docs/webfont_loader

Answer 2

尝试在load对象上使用window，当在页面上加载所有资源时会触发该对象，这可能会对您有帮助。

$(window).load(function(){
    $element.data('offset', $element.offset().top);
});