CODEWITHSUNDEEP
javascriptjqueryhtmlimagedomready
user2183143
user2183143

Reputation: 1

Get image dimension after page load

I have a project that needs to get the logo's dimension and adjust its position accordingly. From what I understand, all the elements on the page should be ready for use right after $(document).ready or onload event. I also tried to put the script before the closing body tag to make sure I can get everything. I use jQuery $(element).width and $(element).height to measure the logo image.

However, I am not getting these value every time: I console log these two values. Sometimes, it shows me zero which I guess the image tag is loaded, but the actual image is still loading. I am so confused because I search online, they all say all the elements should be ready if I use DOM ready or put the script tag in the end.

Upvotes: 0

Views: 100

Answers (2)

Suresh Atta
Suresh Atta

Reputation: 121998

try this

$('#img').load(function() {
// Handler for .load() called.
});

Upvotes: 1

C3roe
C3roe

Reputation: 96306

all the elements on the page should be ready for use right after $(document).ready or onload event. I also tried to put the script before the closing body tag to make sure I can get everything.

No, the $(document).ready event resp. embedding the script as last element in body only guarantee that the DOM structure is build up already. That does not mean that external resources referenced by any elements have already finished loading – the only event that guarantees that is the load event.

The jQuery docs explicitly warn about combining $(document).ready and “old school” load event handling (meaning onload attribute on body or window.onload) – so you should use .on('load', handler) instead. But be aware of the cave-ats of that regarding images that the docs also mention.

Upvotes: 0

Related Questions