Geek Answers Handbook

Why does the window.load event occur before img loads?

The ready event occurs after loading the HTML document, and the window.onload event occurs later, when all content (for example, images, css) is also loaded.

In the code below

<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 Result

enter image description here

Actual output

enter image description here

So,

1)

Why does the window.onload event occur before img loads?

2)

What is equivalent javascript code for

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

+6
source share
2 answers

Are you trying to expand the Div to be the same image size? and I see some kind of textbook from the link ... I think that you are done

1- you can include th image inside div

2- you can add an image to the div if you do not have access to 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 hard work I can direct you to this post, there are many tools that need to be redone to convert a JQ form to JS

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

+4
source

For the first question, Why does the window.load event occur before img loads? :

This is not true. According to your screenshot, you explicitly got the values ​​for the .height() and .width() methods. This means that either the image is uploaded, or that your image has the height / width set by CSS.

For the second question, in vanilla javascript , it can 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 the jquery width() and height() docs, both return the "current calculated" width / height.

So, if your image has not yet been uploaded, these methods will return 24 , the size of which is the default icon not found 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 I assume that you are wondering why the text is written on top of the image when you asked javascript to write it after loading the image.

Then the answer is that you write in <div id="div1"></div> , which is placed before the <img> in html. The js time is running, it doesn't matter how the content is displayed, if you tell the browser that it places the element as the first node, (and if you use only CSS by default) then it will be at the top of your page.

+2
source

More articles:


All Articles