Explication détaillée de l'utilisation de la méthode prête de jQuery

Cet article présente principalement l'utilisation de la méthode ready de jQuery. Cette méthode est utilisée pour obtenir l'effet d'être exécutée uniquement une fois le chargement terminé. Les amis ayant les mêmes besoins peuvent s'y référer.

La méthode ready dans jQuery implémente l'effet d'être exécutée uniquement après le chargement de la page. Cependant, il ne s'agit pas d'un package de window.onload ou de document.onload, mais elle utilise le DOM du navigateur standard du W3C. masquer l'API et le navigateur IE Tout d'abord, regardons le code jQuery

Le code est le suivant :

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

Le code est le suivant :

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

Le code est le suivant :

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

Résumé :

Il y a deux événements lorsque la page est chargée L'un est prêt, ce qui signifie que le document. La structure a été chargée (à l'exclusion des images et autres fichiers multimédias non-événements), et la seconde est en cours de chargement, ce qui indique que tous les éléments de la page, y compris les images et autres fichiers, ont été chargés. (On peut dire : ready est chargé avant onload !!!)
Le contrôle de style général, tel que le contrôle de la taille de l'image, est chargé dans onload ;
La méthode de déclenchement d'événement JS peut être chargée dans ready ;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!