Tips for JavaScript to determine whether a page is loaded before executing a predefined function. javascript page

Tips for JavaScript to determine whether a page is loaded before executing a predefined function. javascript page

The execution of JavaScript scripts must be triggered. The general practice is to directly write several functions on the webpage, some of which are processed by the browser when the code is loaded, or use code similar to the following to trigger the function.

<div id=”link” onclick=”fun()” ></div>

The code above means that when you click the element whose id is link, it triggers its onclick event and then executes the fun function defined using JavaScript. This is definitely unreasonable because the trigger operation is directly written into the HTML structure, and the content and behavior are not isolated, which will cause inconvenience for subsequent development or modification.
It should be noted that when event processing is bound to the corresponding element, operations can be performed only after that element is loaded. If the processed script is placed in the head area, the browser reports an error. Because the following HTML elements have not been loaded, the processing script in the head has been processed.

A good method for executing JavaScript code should be behavior content separation and post-processing after page loading. Therefore, to process JavaScript code, we need to use the load events of listeners and window objects.

Listener

The function of the listener is to separate the behavior from the content. Previously, we needed to add some trigger events in HTML to trigger JavaScript-related functions. Now, we directly use listeners for an element in JavaScript to listen to events of this element, if this element is triggered and the corresponding processing function of this event is defined in the listener, the function will be processed.

The W3C standard method is addEventListener, which is supported by IE9, chrome, firefox, and opera:

window.addEventListener(‘load',function,false);

In earlier versions, the attachEvent method in IE has similar effects:

window.attachEvent(‘onload',function);

The method of using the listener is also very simple, that is, first obtain an element in the page, and then use the listener for this element to define the listening events and corresponding event processing functions, as shown in the above example:

document.getElementById(‘link').addEventListener(‘click',fun,false);

For more detailed use instructions on listeners, see the supplementary information at the end of this article.
Window. onload event

The onload event is triggered only when the entire page is fully loaded. After JavaScript code is written into the onload event, you can ensure that after the HTML element is loaded, the browser will process our JavaScript code. Basic Syntax:

window.onload = function(){ //code}

In this way, the code in this function will be processed after loading. However, this method has a defect that it can only be used for this function. Multiple window. onload events cannot appear on the page. If multiple onload events occur, the subsequent content will overwrite the previous one.
In this case, we can write all the function names to be loaded in a window. onload event, and then define the function outside:

window.onload = function(){  func1();  func2(); }function func1(){…}function func2(){…}

This can be done, but it is inconvenient, because we need to write all the function names to be loaded, and it will be very troublesome to modify them. Of course there must be some solutions. jQuery provides a very powerful method for loading multiple scripts, so there must be some native JavaScript methods.

Window. onload simultaneously processes Multiple Functions

We need to write a processing function. Let's take a look at the code first:

  function addLoadListener(fn){    if (typeof window.addEventListener != ‘undefined'){      window.addEventListener(‘load',fn,false);    }else if(typeof document.addEventListener != ‘undefined'){      document.addEventListener(‘load',fn,false);    }else if (typeof window.attachEvent != ‘undefined'){      window.attachEvent(‘onload',fn);    }else{      var oldfn = window.onload;      if(typeof window.onload != ‘function'){        window.onload = fn;      }else{        window.onload = function(){          oldfn();          fn();        };      }    }  }

Simply parse this custom addLoadListener function and pass a function name as the parameter. It first checks whether the browser supports related listeners. If the listener is supported, it listens to the onload event of the window object and then processes this function. This Code uses the if statement to determine all browser listening events, which are cross-browser compatible.
We put this code section at the top of the JavaScript code segment, define related functions below, and then use the following statement to load JavaScript Functions.

addLoadListener(func);function func() {…}

In this way, you can directly use the addLoadListener function to process any JavaScript function after the page is loaded. You can also use multiple functions. Generally, it is best to use the onload event to load all JavaScript to avoid unexpected situations.