I have a DOM element that I am storing the offset position of. For example:
$element.data('offset', $element.offset().top);
However, because the page uses Web fonts and has images that have no explicit width or height attributes in the HTML, the page length actually increases as these items finish loading.
Therefore, if this code is run before all resources have loaded completely, the offset will be different. For example, 500 if the Web fonts are still loading, and 1000 if everything has loaded.
I’ve tried using the jQuery load function. This improves the situation, storing the offset only once the page has completely loaded around 70% of the time. However, I need 100% accuracy.
How could this be solved?
Use the Google WebFont Loader, namely the
active()callback. The loader supports font libraries other than Google, so you can load your own fonts:https://developers.google.com/webfonts/docs/webfont_loader