The previous words
When it comes to loading events, you may have thought of it, but in fact, loading events are a large category of events. This article will introduce loading events in detail.
load
The load event is the most commonly used event. 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.
[Notice]IE8 - The browser will not set the srcElement property for this event, while the target property of other browsers points to the document
= function(e){
e = e || event;
var target = || ;
//IE8-Browser returns null, other browsers return document (target);
}
The load event not only occurs on the document object, but also on various external resources. Browsing the web is a process of loading various resources, such as images (image), style sheets, scripts (script), videos, audios (audio), Ajax requests (XMLHttpRequest), etc. These resources, document objects, window objects, and XMLHttpRequestUpload objects will trigger load events
[Notice]If the page is loaded from the browser cache, the load event will not be triggered
Images and frames can also trigger load events
[Notice]To specify events before specifying the src attribute of the image, the image starts downloading after setting the src attribute.
var img = new Image();
= function(){
(img);
}
="/uploads/rs/26/ddzmgynp/";
<iframe src="" frameborder="0"></iframe>
<script>
= function(){
(666);
}
</script>
The script element can also trigger a load event so that developers can determine whether the dynamically loaded javascript file has been loaded. Unlike images, the javascript file will only start downloading after the src attribute of the script element is set and the element is added to the document. In other words, the order of specifying the src attribute and specifying the event handler is not important
[Notice]IE8-Browser does not support this usage
var script = ('script');
= function(){
(666);
}
(script);
=/files/xiaohuochai/;
Similarly, the link element can trigger the load event and there is no compatibility issue. Similar to script, stylesheets are not downloaded until the href attribute is specified and the link element is added to the document.
Similarly, the link element can trigger the load event and there is no compatibility issue. Similar to script, stylesheets are not downloaded until the href attribute is specified and the link element is added to the document.
error
The load event is fired when the load is successful, while the error event is the opposite, and it is fired when the load fails. Any element that can trigger the load event can also trigger the error event.
Any errors that are not processed through try-catch will trigger the error event of the window object
The error event can receive three parameters: error message, URL where the error is located, and line number. In most cases, only error messages are useful because the URL only gives the location of the document, and the line of code referred to by the line number may come from either the embedded javascript code or from an external file.
To specify an error event handler, you can use the DOM0 level technology or the standard format of the DOM2 level event
//DOM0 level = function(message,url,line){
alert(message);
}
//DOM2 level("error",function(message,url,line){
alert(message);
});
Whether the browser displays a standard error message depends on the return value of onerror. If the return value is false, an error message is displayed in the console; if the return value is true, it is not displayed
//Console displays error message = function(message,url,line){
alert(message);
return false;
}
a;
//The console does not display error message = function(message,url,line){
alert(message);
return true;
}
a;
This event handler is the last line of defense to avoid browser reporting errors. Ideally, you shouldn't use it whenever possible. As long as you can use the try-catch statement appropriately, there will be no errors handed to the browser and the error event will not be triggered.
The image also supports error events. As long as the URL in the src characteristic of the image cannot return the recognized image format, an error event will be triggered. At this time, the error event follows the DOM format and returns an event object targeting the image as the target
When the error event occurs, the image download process has ended, which means that it cannot be downloaded again. However, in the error event, you can reset the src property of the image and point to the address of the alternate image
var image = new Image();
(image);
= function(e){
= '';
}
= '';
abort
When the element loading is aborted, (such as pressing the ESC key during loading to stop loading), this event is triggered, which is often used for image loading.
[Notice]Only supported by IE browser
var image = new Image();
= function(){
(111);
}
(image);
= '/uploads/rs/26/ddzmgynp/';
unload
The corresponding load event is the unload event, which is triggered after the document is completely unloaded. Generally, this event will be triggered when refreshing the page
Chrome/firefox/safari browser will block dialog boxes such as alert, and IE browser will block console display such as ()
= function(e){
// Chrome reports an error, firefox fails silently, IE pops up 666 alert(666);
}
= function(e){
//The Chrome and firefox consoles show 666, and IE silence fails (666);
}
beforeunload
The beforeunload event is fired when the web page is closed or refreshed. It is generally used to prevent users from accidentally closing web pages
If you want the beforeunload event to take effect, one of the following two conditions must be met: 1. The event handler returns a true value; 2. The event object returns a true value. If both conditions are met at the same time, the first condition shall prevail
chrome/safari/firefox does not display the specified text in the dialog box, only the default text is displayed. The IE browser will display the return value or returnValue value in the dialog box
= function(e){
e = e || event;
//IE browser displays the specified text, and other browsers displays the default text = 'Do you want to leave? ';
}
DOMContentLoaded
The onload event of the window will be triggered when everything in the page is loaded, but this process may be troublesome because there are too many external resources to load. The DOMContentLoaded event will be fired after forming a complete DOM tree, ignoring whether the image, javascript file, CSS file or other resources have been downloaded. Unlike load events, DOMContentLoaded supports adding event handlers early in the page download, which means that users can interact with the page as early as possible.
[Notice]The javascript script of a web page is executed synchronously, so the listening function that defines the DOMContentLoaded event should be placed at the front of all scripts. Otherwise, once the script is blocked, the DOMContentLoaded event will be delayed.
To handle the DOMContentLoaded event, you can add the corresponding event handler for the document or window. Although this event will bubble up to the window, its target is actually the document
[Notice]IE8-Browser does not support this event
('DOMContentLoaded',function(e){
(1);
})
For browsers that do not support this event, such as IE8-browser, a timeout call with a timeout of 0 milliseconds can be set during the page load, and must be the first timeout call of the page.
setTimeout(function(){
(1);
},0)
readystatechange
The readystatechange event occurs when the Document object and XMLHttpRequest object, and their readyState property changes when the readyState property changes.
The purpose of this event is to provide information about the loading status of a document or element. Each object that supports the readystatechange event has a readyState property, which may contain one of the following 5 values.
uninitialized(Not initialized)：对象存在但尚Not initialized loading(Loading)：对象Loading数据 loaded(Loading completed)：Object loading data is completed interactive(Interaction)：It's time to operate the object，But it hasn't fully loaded complete(Finish)：对象已经Loading completed
These states look intuitive, but not all objects go through these stages of readyState. In other words, if an object does not apply to a certain stage, it is entirely possible that the object will skip that stage; there is no requirement which stage applies to which object. Obviously, this means that the readystatechange event often takes less than 4 times, and the value of the readyState property is not always continuous.
For document, a readyState with a value of "interactive" triggers the readystatechange event at approximately the same time as DOMContentLoaded. At this time, the DOM tree has been loaded and can be operated safely, so it will enter the interactive stage. But at the same time, images and other external files are not necessarily available
//'interactive' 'complete'
= function(e){
if( == 'uninitialized'){
('uninitialized');
}
if( == 'loading'){
('loading');
}
if( == 'loaded'){
('loaded');
}
if( == 'interactive'){
('interactive');
}
if( == 'complete'){
('complete');
}
}
When used with the load event, the order in which the two events are triggered cannot be predicted. In a page containing more or larger external resources, the interactive phase will be entered before the load event is triggered; while in a page containing fewer or smaller external resources, it is difficult to say that the readystatechange event will occur before the load event
What makes the problem more complicated is that the interactive phase may occur earlier than or later than the completion phase, and the order cannot be ensured. In pages containing more external resources, the interaction phase is more likely to appear earlier than the completion phase; whereas in the case where fewer external resources are included in the page, the completion phase is more likely to appear before the interaction phase. Therefore, in order to seize the initiative as much as possible, it is necessary to simultaneously detect the interaction and complete the stage.
= function(){
if( == 'interactive' || == 'complete'){
('loaded');
= null;
}
}
For the above code, when the readystatechange event is triggered, the value will be detected to see if it has entered the interactive phase or completed phase. If so, remove the corresponding event handler to avoid execution in other stages
In addition, IE10-browser supports triggering readystatechange events for script elements and link elements, which are used to determine whether the external javascript or css file has been loaded.
var script = ('script');
= function(){
if( == 'loaded' || == 'complete'){
('loaded');
= null;
}
}
="js/";
(script);
var link = ('link');
="stylesheet";
= function(){
if( == 'loaded' || == 'complete'){
('loaded');
= null;
}
}
="" rel="external nofollow" ;
('body')[0].appendChild(link);
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!