Jquery ready method implementation principle internal principle

Source: Internet
Author: User

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/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.