Detaillierte Erläuterung der Verwendung der Ready-Methode von jQuery

In diesem Artikel wird hauptsächlich die Verwendung der Ready-Methode von jQuery vorgestellt. Diese Methode wird verwendet, um den Effekt zu erzielen, dass Freunde mit den gleichen Anforderungen darauf verweisen können.

Die ready-Methode in jQuery implementiert den Effekt, dass sie erst ausgeführt wird, nachdem die Seite geladen wurde. Es handelt sich jedoch nicht um ein Paket von window.onload oder document.onload, sondern um das standardmäßige W3C-Browser-DOM Verstecken Sie die API und den IE-Browser. Schauen wir uns zunächst den jQuery-Code an

Der Code lautet wie folgt:

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

Der Code lautet wie folgt:

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 ); 
};

Der Code lautet wie folgt:

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"); 
 }
},

Zusammenfassung:

Es gibt zwei Ereignisse, wenn die Seite geladen wird, was bedeutet, dass das Dokument bereit ist Struktur wurde geladen (ausgenommen Bilder und andere Nicht-Ereignis-Textmediendateien), und die zweite ist „onload“, was angibt, dass alle Elemente der Seite, einschließlich Bilder und andere Dateien, geladen wurden. (Man kann sagen: „Ready“ wird vor „Onload“ geladen!!!)
Allgemeine Stilsteuerung, wie z. B. Bildgrößensteuerung, wird in „Onload“ geladen;
JS-Ereignisauslösemethode kann in „Ready“ geladen werden;

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Ready-Methode von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!