Why window.load event occurs before img is loaded?

Question

The ready event occurs after the HTML document has been loaded, while the window.onload event occurs later, when all content (e.g. images, css) also has been loaded.

In the below code,

<script> jQuery(window).load(function(){ jQuery('#div1').html("Height= " + jQuery('#img1').height() + "<br>" + "width= " + jQuery('#img1').width()); }); </script>

<body> <div id="div1"></div> <img id="img1" src="MammalConstructor.png"> </body>

Expected output

Actual output

So,

1)

Why window.onload event is occured before img is loaded?

2)

What is the equivalent javascript code for,

jQuery('#div1').html("Height= " + jQuery('#img1').height() + "<br>" + "width= " + jQuery('#img1').width());?

In the above code, am expecting height and width values to be rendered after `img` is loaded. — overexchange, Dec 26 '15 at 03:15
i hope the above drawings are the image itself and not an extemely overzealous attempt at explaining the issue — nicholaswmin, Dec 26 '15 at 03:22
@overexchange Try using only `window.onload = alert('window loaded');` Leave the window object unwrapped. — zer00ne, Dec 26 '15 at 03:24
for the second question, in vanilla it would be `document.querySelector('#div1').innerHTML = "Height= " + getComputedStyle(document.querySelector('#img1')).height + "
" + "width= " + getComputedStyle(document.querySelector('#img1')).width;` and maybe your problem nb 1 is that the `width()` and `height()` methods do return the computed style, not the width or height of your images, and that your call to the `alert` method may block the rendering. Try to get `$('#img1')[0].width` instead. — Kaiido, Dec 26 '15 at 03:28
You can put a script element right after the img and then manipulate it. — www139, Dec 26 '15 at 03:39
@www139 what a terrible advice... While the DOM element will be created at the point the script will be parsed, the content still won't be loaded yet and width and height will be 0. — Kaiido, Dec 26 '15 at 03:41
@NicholasKyriakides That img was to explain myself about prototypical inheritance. I was bad in OOJS recently. — overexchange, Dec 26 '15 at 03:55
@overexchange, after a more in depth look to your question, are you just surprised that the text is rendered on top of your image instead of at its bottom? In this case, it's just normal, you placed `#div1`first in the HTML hierarchy. Also, you have the correct values, so your image is rendered at the time the `load` handler does fire. — Kaiido, Dec 26 '15 at 03:59

score 4 · Answer 1 · edited May 23 '17 at 12:04

4

you are trying to expand the Div so it will be the same the size of the image ? and I see from the link up its some kind of tutorial ... I think you are over doing this

1- you can include th image inside the div

2- you can append the image inside the div if you don't have access to the html ....

for the first point use window.onload not load

read this for more info window.onload vs $(document).ready()

about your second point

jQuery('#div1').html("Height= " + jQuery('#img1').height() + "<br>" + "width= " + jQuery('#img1').width());? converting to JS is abit hard work I can refer you to this post there is many tools sugested to convert form JQ to JS

Is there an easy way to convert jquery code to javascript?

edited May 23 '17 at 12:04

Community

1
1

answered Dec 26 '15 at 03:27

J.Tural

1,365
11
28

downvote from me. code does not work with `window.onload`. I generally give `onload` when I pass it to `document.addEventListener` – overexchange Dec 26 '15 at 03:31
you should ask them .... but in general you are over doing it and you go so far in wrong approach ... and I dont get it why all this you want to expand the div to the size of the photo ! – J.Tural Dec 26 '15 at 04:03
I think this exercise can better be tested by using `$('body')` insteaf of `$('#div1')`. you are right – overexchange Dec 26 '15 at 06:56

score 2 · Answer 2 · answered Dec 26 '15 at 12:26

For the first question Why window.load event occurs before img is loaded? :

It doesn't. According to your output screenshot, you clearly got values for .height() and .width() methods. Which does mean that either the image has loaded, or that your image have its height/width set by CSS.

For the second question, in vanilla javascript, it could be written as

document.querySelector('#div1').innerHTML = "Height= " +
  parseFloat(getComputedStyle(document.querySelector('#img1')).height) + "<br>" +
  "width= " + parseFloat(getComputedStyle(document.querySelector('#img1')).width);

As you can see in jquery's docs, width() and height() methods, both return the "the current computed" width/height.

So if your image wasn't loaded yet, these methods would return 24, which is the size of the default not found icon or 0.

var before = "before load height= " + jQuery('#img1').height() + "<br>" + "before load width= " + jQuery('#img1').width()+"<br>";

jQuery(window).load(function() {
  jQuery('#div1').html(before + "on load height= " + jQuery('#img1').height() + "<br>" + "on load width= " + jQuery('#img1').width());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"></div>
<img id="img1" src="http://lorempixel.com/200/200">

Now, my guess is that you are wondering why the text is written on top of the image, when you asked javascript to write it after the image has loaded.

Then the answer is simply that you are writing into the <div id="div1"></div> which is placed before the <img> tag in you html. The time js is executed has no importance on how the content will be rendered, if you tell the browser to place an element as the first node, _{( and if you only use default CSS )} then it will be at top of your page.

Why window.load event occurs before img is loaded?

Expected output

Actual output

2 Answers2