JS is compatible with the DOMContentLoaded events of all browsers, and jsdomcontentloaded

JS is compatible with the DOMContentLoaded events of all browsers, and jsdomcontentloaded

When JavaScript is used to operate dom elements, the code for obtaining dom elements is usually placed inWindow. onload = function () {}Processing function, but window. the onload event may affect the customer experience after some starts, because it will be triggered only after all the scripts, css code, images, and other content are loaded, especially if the image volume is large, the customer experience will be severe. Therefore, you only need to load the DOM structure.$(document).ready(function(){})The following describes how native JavaScript implements this function.

Implementation Process introduction:

In the standard browser, we can use the DOMContentLoaded event to fulfill our requirements, and registering the event processing function is also extremely simple.

The Code is as follows:

addEventListener(‘DOMContentLoaded',fn,false)

However, browsers under IE8 and IE8 do not support the DOMContentLoaded event. Therefore, you need to find another solution to this problem.

Many may think that according to document. document of the onreadystatechange event. whether the readyState state is equal to the complete State to determine whether the dom structure has been loaded, but the task cannot be completed after testing. If the page uses iframe to introduce sub-pages, the problem may occur.

The solution is as follows:

The doScroll method exclusive to IE in earlier versions. When the dom structure is not loaded, an error is reported when this method is called. Therefore, you can use the timer function to call this method continuously, combined with try catch statements, the Code is as follows:

eventQueue = [];isReady = false;isBind = false;function domReady(fn){ if(isReady){  fn.call(window); } else{  eventQueue.push(fn); }; bindReady();};function bindReady(){ if(isReady) return;  if(isBind) return;  isBind=true;  if(window.addEventListener){   document.addEventListener('DOMContentLoaded',execFn,false);  }  else if(window.attachEvent){   doScroll();  };};function doScroll(){ try{  document.documentElement.doScroll('left'); } catch(error){  return setTimeout(doScroll,20); }; execFn();};function execFn(){ if(!isReady){  isReady=true;  for(var index=0;i<eventQueue.length;index++){   eventQueue[index].call(window);  };  eventQueue = []; };};domReady(function(){ //code});domReady(function(){ //code});

The Code implements the DOMContentLoaded effect compatible with all browsers. The following describes the implementation process.

I. Code comments:

(1). eventQueue = [], declares an empty array for the function queue to be executed.

(2). isReady = false: declare a variable and assign the initial value to false. If it is true, the dom has been loaded.

(3). isBind = false: declare a variable and assign the initial value to false. If it is true, it indicates that the time processing function has been bound.

(4). function domReady (fn) {}. This function implements the function of executing the fn function after dom loading is complete.

(5). if (isReady) {fn. call (window) ;}. if the variable value is true, the function is executed directly.

(6). else {eventQueue. push (fn) ;}, Add the function to be executed to the array.

(7). bindReady (), which registers event processing functions.

(8). if (isReady) return, if it is equal to true, jump out of the function directly. At this time, the fn function has been executed.

(9). if (isBind) return, if you have already registered it, you do not need to perform the second operation.

(10). isBind = true: change the value of the variable to true.

(11). if (window. addEventListener) {document. addEventListener ('domainloaded', execFn, false);}. if it is a standard browser, use addEventListener to register the event handler.

(12). else if (window. attachEvent) {doScroll () ;}. if IE8 and IE8 are earlier browsers, call the doScroll method to achieve this effect.

(13 ). function doScroll () {}. This function can use the timer function to continuously call the doScroll () function. If an error is reported, the function will continue to be called. Otherwise, the dom structure is loaded, then execute the relevant functions.

(14). function execFn () {}, which can extract the function to be executed from the array, execute it, and finally clear the array.

Summary

The above section describes the Javascript compatibility with the DOMContentLoaded events of all browsers. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!