CODEWITHSUNDEEP
jqueryhtmlcss
AlyoshaKaramazov
AlyoshaKaramazov

Reputation: 616

Resources loading too slow in my page

I have a webpage, there's some jQuery on the page that performs the sizing of a div (read more / read less) according to the text placed inside it.

I'm using a custom local font and 90% of the time it works fine, but other times it's over estimating the space needed.

Using the debugger I've found this only happens when the script executes before the page is displaying any of the fonts or icons I'm using (in my resources folder). The Chrome debugger shows that the rendered font is "DejaVu Sans". I'm assuming it's using this count to perform the jQuery after which it replaces the font with my custom font.

I guess this is some kind of loading time problem in terms of the font and as it's inconsistent it's also to do with the cache. But what can I do here? Is there someway to make sure the resources are loaded and available before the dom is ready?

Upvotes: 0

Views: 315

Answers (3)

AlyoshaKaramazov
AlyoshaKaramazov

Reputation: 616

This was just a problem of the JQuery running before the font had loaded. I used the Web Font Loader custom module (as my font wasn't on google or font squirrel) and callbacks to solve this.

Upvotes: 0

Dan O
Dan O

Reputation: 6090

$().ready() and friends will run as soon as the DOM has been parsed; it won't wait until images and stylesheets and things are loaded. You might want to check out the JS-native load event. From the MDN docs:

The load event is fired when a resource and its dependent resources have finished loading.

So, something like this should work:

<script>
  document.addEventListener("load", function(event) {
    console.log("DOM, images, stylesheets etc. all present");
  });
</script>

Upvotes: 1

noe m
noe m

Reputation: 167

it has been some time since i have done it but you have to optimise it using http://www.fontsquirrel.com/tools/webfont-generator And if you font is available on https://www.google.com/fonts than use that instead

Upvotes: 1

Related Questions