Detailed explanation of jQuery's ready method usage

This article mainly introduces how to use the ready method of jQuery. This method is used to achieve the effect of being executed only after the man is loaded. Friends who have the same needs can refer to it.

The ready method in jQuery implements the effect of being executed only after the page is loaded, but it is not a package of window.onload or document.onload, but uses the standard W3C browser DOM to hide the api and IE browser Defects to complete, first, let's look at the jQuery code

The code is as follows:

DOMContentLoaded = function() 
 { 
         //取消
事件
监听，执行ready方法     if ( 
document
.addEventListener ) 
    {      
        document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); 
        jQuery.ready(); 
    } 
     else if ( document.readyState === "complete" )  
    { 
        document.detachEvent( "onreadystatechange", DOMContentLoaded ); 
        jQuery.ready(); 
    } 
};

The code is as follows:

jQuery.ready.promise = function( obj ) { 
    if ( !readyList ) { 
        readyList = jQuery.Deferred(); 
            //表示页面已经加载完成，直接调用 ready方法         if ( document.readyState === "complete" ) {  
            //将 jQuery.ready压入异步消息队列，设置延迟时间1毫秒（注意，有些浏览器延迟不能小于4毫秒）             setTimeout( jQuery.ready);  
        }  
        else if ( document.addEventListener ) //         { 
             //监听DOM加载完成             document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); 
             //这里是为了确保所有ready执行结束，如果DOMContentLoaded方法执行了，将有一个状态值 isReady被设置为true,因此，              //ready方法一旦执行，那么将只执行一次，window.addEventListener中的ready 将被 return 中断             window.addEventListener( "load", jQuery.ready, false ); 
        } else { 
            //低版本的IE浏览器             document.attachEvent( "onreadystatechange", DOMContentLoaded ); 
            window.attachEvent( "onload", jQuery.ready ); 
            var top = false; 
            try { 
                top = window.frameElement == null && document.documentElement; 
            } catch(e) {} 
            if ( top && top.doScroll )  //剔除iframe的成分             { 
                (function doScrollCheck() { 
                    if ( !jQuery.isReady ) { 
                        try { 
                            //根据bug来兼容低版本的IE http://
javascript
.nwbox.com/IEContentLoaded/                             top.doScroll("left"); 
                        } catch(e) { 
                            //由于低版本的IE 浏览器，onreadystatechange事件不可靠，因此需要根据各个bug来判断页面是否已加载完成                             return setTimeout( doScrollCheck, 50 );  
                        } 
                        jQuery.ready(); 
                    } 
                })(); 
            } 
        } 
    } 
    return readyList.promise( obj ); 
};

The code is as follows:

ready: function( wait )
 {
 if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) { 
  //判断页面是否已完成加载并且是否已经执行ready方法
  return;
 }
 if ( !document.body ) {
  return setTimeout( jQuery.ready );
 }
 jQuery.isReady = true; //指示ready方法已被执行
 if ( wait !== true && --jQuery.readyWait > 0 ) {
  return;
 }
 readyList.resolveWith( document, [ jQuery ] );
 if ( jQuery.fn.trigger ) {
  jQuery( document ).trigger("ready").off("ready"); 
 }
},

Summary:

There are two events when the page is loaded. One is ready, which indicates that the document structure has been loaded (excluding non-text media files such as pictures), and the other It is onload, indicating that all elements of the page including pictures and other files have been loaded. (It can be said: ready is loaded before onload!!!)
General style control, such as image size control, is loaded in onload;
The jS event triggering method can be loaded in ready;

The above is the detailed content of Detailed explanation of jQuery's ready method usage. For more information, please follow other related articles on the PHP Chinese website!