Jquery ready method implementation principle internal principle

Today, I have nothing to do with jquery. the internal implementation of ready () is confused by the source code of JQ. Because of the fact that I am very fond of cooking, I flipped through the podcast of the cool-man, telling details and gaining a lot.

First, popularize jquery. ready () and window. onload, window. the onload event is triggered after all resources on the page are loaded. if there are large images and other resources on the page, the response will be slow, resulting in window. the onload event cannot be triggered.The DOM Ready event occurs. This event is triggered after the DOM document structure is Ready, that is, before the resource is loaded.

My ready method has been written in version 2. I have learned a lot from the code of my predecessors and started with the code.

Code 1.0 is available, and the code is as follows:

Var $ = ready = window. ready = function (fn) {if (document. addEventListener) {// compatible with non-IE document. addEventListener ("DOMContentLoaded", function () {// deregister the event to avoid triggering document repeatedly. removeEventListener ("DOMContentLoaded", arguments. callee, false); fn (); // call parameter functions}, false);} else if (document. attachEvent) {// compatible with IE document. onreadystatechange = function () {if (document. readyState = 'complete') {document. onreadystatechange = null; document. attachEvent ("onreadystatechange", function () {document. detachEvent ("onreadystatechange", arguments. callee); fn (); // call the Parameter function}) ;};}} ready (function () {alert (1 );});

1.0 is problematic. It is natural that browsers that don't have any problem, but we should be calm when we encounter IE. IE9 is intact, but IE6/7/8 is disgusting.

During the test, it is best to install a huge image on the page and refresh it every time. You will find that the ready and onload we wrote on IE6/7/8 are not the same! It may be slower than onload! Fuck! In fact, this is an onreadystatechange problem. If you want to make it work for your page, you have to figure it out. Do you have a black line on your face! I bought a block table yesterday!

As a result, I translated the article about how to solve the problem through a big podcast.

Code 2.0 is available, and the code is as follows:

Var $ = ready = window. ready = function (fn) {if (document. addEventListener) {// compatible with non-IE document. addEventListener ("DOMContentLoaded", function () {// deregister the event to avoid triggering document repeatedly. removeEventListener ("DOMContentLoaded", arguments. callee, false); fn (); // call parameter functions}, false);} else if (document. attachEvent) {// compatible with IE IEContentLoaded (window, fn);} function IEContentLoaded (w, fn) {var d = Invalid Doc ument, done = false, // only fir E once init = function () {if (! Done) {done = true; fn () ;};// polling for no errors (function () {try {// throws errors until after ondocumentready d.doc umentElement. doScroll ('left');} catch (e) {setTimeout (arguments. callee, 50); return;} // no errors, fire init () ;}) (); // trying to always fire before onload d. onreadystatechange = function () {if (d. readyState = 'complete') {d. onreadystatechange = null; init () ;};}} ready (function () {alert (1 )})

During the test, you 'd better install a huge image on the page and try to solve the problem. IE's IEcontentloaded code principle is not hard to understand, written by a foreign cool, as if jquery is also in use.

This essay is also written while learning. Let's make progress together!

Niu Ren podcast: http://www.cnblogs.com/haogj/archive/2013/01/15/2861950.html

Solution of IEcontentloaded in IE: http://javascript.nwbox.com/IEContentLoaded/