jquery - How can I wait for a custom font to load before checking layout properties? -


this question has answer here:

when try check width of text calling .width() of span text in, wrong value @ first. why call .width() again, right value.

i'm adding text using .append() want width of immediately. when open file through chrome directly (not using internet dropbox.com), gets width value correctly 99% of time. loading issue?

here's example: https://dl.dropboxusercontent.com/u/98788053/school/test.html

<script>   $(document).ready(function() {     $("body").append("<span id=\"element\">text measure</span>");     $("body").append("<div id=\"thewidth\"></div>");     $("body").append("<input type=\"button\" value=\"try again\" onclick=\"getwidth();\">");     getwidth();   });   function getwidth()   {     $("#thewidth").html($("#element").width()+"px");   } </script> 

jsfiddle demo

there difference between document.ready , window.onload, document.ready jquery fire before images loaded (or custom font in case) because dom technically ready.

for situation, suggest try instead:

<script> window.onload = function(){   $("body").append("<span id=\"element\">text measure</span>");   $("body").append("<div id=\"thewidth\"></div>");   $("body").append("<input type=\"button\" value=\"try again\" onclick=\"getwidth();\">");   getwidth(); }; function getwidth() {   $("#thewidth").html($("#element").width()+"px"); } </script> 

this almost works. there one more step. in order preload font, need have element on page trigger load. can empty, , example not affect layout:

<span style="font-family: jennasue;visibility:hidden;"></span> 

from tests, cannot script in head, must done inside of <body> tags.


Comments

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

java - Multi-Label Document Classification -

php - Dynamic url re-writing using htaccess -