When the page is fully loaded (including all images, JavaScript files, CSS files and other external resources), the load event on the window will be triggered.
There are two ways to define onload event handlers. The first way is to use the following JavaScript code:
EventUtil.addHandler(window,"load",function(event){
alert("loaded!");
});//Refer to the previous JS Event Object article for details on EventUtilThis is how event handlers are specified through JavaScript.
The second way to specify the onload event handler is to add an onload feature before the < body > element, as shown in the following example:
<!DOCTYPE html>
<html>
<head>
<title>load Event Example</title>
</head>
<body onload = "alert("Loaded!")">
</body>
</html>Generally speaking, any event that occurs on windows can be specified in the < body > element through the corresponding features, because the window element cannot be accessed in HTML. In fact, this is an expedient measure to ensure backward compatibility, but all browsers can support it well.
The load event can also be triggered on the image.
<img src = "url" onload = "alert('image loaded')">This will pop up a warning box when the image is loaded.
Of course, it can also be implemented by the corresponding JS code.
var image = document.getElementById("myImage");
EventUtil.addHandler(image,"load",function(){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});Here, the onload event handler is specified using javaScript. Event objects are also introduced, although he does not contain any useful information. However, the object of the event is the < img > element, so this information can be accessed and displayed through the src attribute.
When you create a new < img > element, you can specify an event handler for it to prompt when the image is loaded. At this point, the most important thing is to specify the event before specifying the src attribute, as shown in the following example
EventUtil.addHandler(window,"load",function(){
var image = document.createElement("img");
EventUtil.addHandler(image,"load",function(){
event = EventUtil.getEvent(event);
alert(EventUtile.getTarget(event).src);
)};
document.body.appendChild(image);
image.src = "url";
)};In this example, the onload event handler is first specified for window s. The reason is that we want to add a new element to the DOM, so we have to make sure that the page has been loaded -- if we manipulate document.body before the page loads, it will cause errors. Then, a new image element is created and its onload event handler is set up. Finally, the image is added to the page and its src attribute is set. One thing to note here is that new image elements don't have to be added to the document before they start.
Download, as long as the src property is set, the download will begin. So you must specify the event handler before specifying the URL.
Some elements also support load events in a non-standard way. In IE9+, Firefox, Opera, Chrome, and Safari 3+, the < script > element also triggers the load event so that developers can determine whether the dynamically loaded JavaScript file has been loaded. Unlike images, JavaScript files are downloaded only after the src attribute of the < script > element is set and added to the document. In other words, for < script > elements, specifying the src attribute and specifying the sequence of event handlers is not important. Examples are as follows
EventUtil.addHandler(window,"load",function(){
var script = document.createElement("script");
EventUtil.addHandler(script,"load",function(event)
{
alert("Loaded");
});
script.src = "url";
document.body.appendChild(script);
});This example uses the cross-browser EventUtil object to specify the onload event handler for the newly created < script > element. At this point, the target attribute of event objects in most browsers refers to < script > nodes, whereas in previous versions of Firefox 3, document s were referenced. IE8 and earlier versions do not support load events on < script > elements.
IE and Opera also support load events on <link> elements to enable developers to determine whether the stylesheet has been loaded. For example:
EventUtil.addHandler(window, "load", function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});