jQueryのreadyメソッドの使い方を詳しく解説

この記事では主にjQueryのreadyメソッドの使い方を紹介します。このメソッドは、読み込みが完了したときにのみ実行される効果を実現するために使用されます。同じニーズを持つ友人はそれを参照してください。

jQuery の Ready メソッドは、ページが読み込まれた後にのみ実行される効果を実現しますが、window.onload や document.onload のパッケージではなく、標準の W3C ブラウザ DOM を使用して API を非表示にします。 IE ブラウザ の欠陥を完成させるために、まず jQuery コードを見てみましょう

コードは次のとおりです:

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

コードは次のとおりです:

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

コードは次のとおりです:

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

概要:

ページが読み込まれるときは 2 つのイベントがあります。1 つは準備ができており、ドキュメントの構造が読み込まれたことを意味します (画像などの非テキストメディアファイルを除く)。2 つ目は onload で、すべての要素がロードされていることを示します画像やその他のファイルを含むページの内容がロードされました。 (つまり、ready は onload の前にロードされます。)
画像サイズ制御などの一般的なスタイル コントロールは、onload でロードされます。
jS イベント トリガー メソッドは、ready でロードできます。

以上がjQueryのreadyメソッドの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。