W
W
weranda2018-01-30 10:55:38
JavaScript
weranda, 2018-01-30 10:55:38

Are there any instances of JavaScript/jQuery calculation miscalculations?

Greetings

Yesterday was spent all day. The site page has an H1 heading right after it, JS was inserted that determines its height, but its height was not always determined correctly - the further the script was inserted into the HTML structure, the more often it worked correctly (correctly determined the height), but still there were cases of incorrect triggering. I decided to try jQuery - I placed the file before the closing BODY tag and did not rejoice for long, refreshed the page several times and still saw the same result - the height does not match the display on the screen. The pod added $(window).load(...) and tried it a hundred times - everything is correctly determined.

I even tried to determine the width, but it is not always correctly determined, even if the title is placed on one line.


I decided to check everything again (placed the script after the title). Reduced internet speed to 10 kb/s and started to peer + added window.stop() function; immediately after the script, everything is displayed correctly on the screen, but the situation is the same - the height of the header in JS / jQuery does not always correspond to what is displayed on the screen.

I tried to make a small template-skeleton of the desired block with a title without styles and scripts at all. And then everything is correctly calculated.

There is some misunderstanding as to why this is happening. It seems that the CSS has loaded + everything is correct on the screen, but the height is correctly calculated only inside $(window).load(...). Maybe it's because JS / jQuery is triggered before the browser applies the style rules to the block or something else?

Clarify please.

For reference, codes:
spoiler

JavaScript
var myTitle = document.querySelector('.title').offsetHeight;
console.log(myTitle);

jQuery
console.log($('.title').height());

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey Ukolov, 2018-01-30
@weranda

A custom font is used that is not loaded/rendered at the time of the first measurements.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question