Menu
The
readyevent occurs after the HTML document has been loaded, while thewindow.onloadevent 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());?
810
The load event also occurs on images. To handle the load event on the images, you can use the addEventListener () method of the image elements. The following example uses the load event handler to determine if an image, which exists in the DOM tree, has been completely loaded:
The window’s load event. For the window object, the load event is fired when the whole webpage (HTML) has loaded fully, including all dependent resources such as JavaScript files, CSS files, and images. To handle the load event, you register an event listener using the addEventListener () method: window .addEventListener ( 'load', (event) ...
If the images are very big, they won't be loaded by the time they are added to the DOM. We can detect this event using onload. Note that the order of your code does matter. The onload function has to be defined before the src of the image is set:
We will also find out how we can check whether an image is loaded or not using JavaScript by creating an alert box. The .onload event occurs only when an object has been loaded. The .onload event is mainly used within the element body to execute a script once a web page has loaded all contents, including images, script, CSS files, etc.
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?
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
