Menu
I'm familiar with the typical use of onload, as in the following:
<body onload="alert('Hello, World!');">
...
</body>
What are all the html elements that fire a load event? (thus executing javascript supplied in an onload attribute)
For example, img is one such tag that will execute the javascript supplied in an onload attribute when some.png has loaded:
<img onload="someImgLoaded()" src="some.png" />
273
onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see "Supported HTML tags" below).
JavaScript has a window onload event to launch certain functions whenever a web page is loaded. The onload event is also used for verification of type and version of visitor's browser. Further cookies can also be checked through the onload attribute. The attribute of onload triggers when the object is loaded in HTML.
You can assign an onload event handler directly using the onload attribute of the <img> element, like this: <img id="logo" src="logo.
The onload event can only be used on the document(body) itself, frames, images, and scripts. In other words, it can be attached to only body and/or each external resource. The div is not an external resource and it's loaded as part of the body, so the onload event doesn't apply there.
'onload' is supported by the following HTML tags:
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
And the following Javascript objects:
image, layer, window
144
Below is a much more comprehensive list of elements that fire a load event when the requested resource finishes downloading:
body # (just fires a load event, doesn't make requests itself) img image link iframe frameset frame script embed object video ? source track audio ? source svg <input type="image" src="submit.gif" alt="Submit"> <object width="400" height="400" data="helloworld.swf"></object> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> webgl? For the most coverage, it's best to consider that all html elements referencing a url will result in a request and fire a load or error event when that request for the succeeds or fails. So, basically, any element with a src or href attribute, except for these tags:
a # What else? Not sure off hand.. And including the body tag, because it ironically doesn't have a src OR href attribute.
Below is some rough javascript for discovering these elements:
var tagsToIgnore = ['a']; ['src', 'href'].forEach(function(attr) { console.log('====' + attr + '===='); [].slice.call(document.querySelectorAll('*[' + attr + ']')).forEach(function(el){ if (!~tagsToIgnore.indexOf(el.tagName.toLowerCase())) { console.log(el.tagName); } }); }); console.log('body # :trollface:'); Also, with the "everything with src or href" method, you ignore irrelevant or other tags that typically have a src or href attribute, but not always.
Other things that can have network failures:
onload and onerror attributes can be useful to keeping track of whether or not your user has an active internet connection, which is something I'm attempting to address with my library check-online.js: http://github.com/devinrhode2/check-online
There is some obvious testing to be done to see whether or not
35
answered Sep 23 '22 08:09
onload is an event specific to the body, frame, iframe, img, link, and script elements. Basically anything which represents a resource to be loaded. For body, that is the document in question. For the others, each is fairly obvious.
44
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
