CODEWITHSUNDEEP
javascriptjqueryhtmlcss
overexchange
overexchange

Reputation: 1

Why window.load event occurs before img is loaded?

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

enter image description here

Actual output

enter image description here

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());?

Upvotes: 6

Views: 1445

Answers (2)

Kaiido
Kaiido

Reputation: 137171

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.

Upvotes: 2

J.Tural
J.Tural

Reputation: 925

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?

Upvotes: 3

Related Questions