Maison  >  Article  >  interface Web  >  Extrayez la méthode ready() de jquery et utilisez-la seule Sample_jquery.

Extrayez la méthode ready() de jquery et utilisez-la seule Sample_jquery.

WBOY
WBOYoriginal
2016-05-16 16:54:321074parcourir

Vous pouvez utiliser l'événement windows.onload, mais à mon avis, le chargement ne peut se produire qu'après que tous les éléments de la page (img, iframe et autres ressources) ont été chargés. S'il y a de grandes images sur la page, elles. sera affiché sur la page. L'exécution a pris beaucoup de temps.

Si vous avez uniquement besoin d'opérer sur le DOM, alors il n'est pas nécessaire d'attendre que la page soit complètement chargée. Nous avons besoin d'un moyen plus rapide. Firefox a un événement DOMContentLoaded qui peut être facilement résolu, mais malheureusement pas IE.

MSDN a un dicton discret sur une méthode JSCRIPT Lorsque la page DOM n'est pas chargée, une exception sera générée lorsque la méthode doScroll est appelée. Ensuite, nous l'utilisons à l'envers. S'il n'y a pas d'exception, alors la page DOM a été chargée. Ainsi, pour les navigateurs Mozilla et Opera, il existe un événement DOMContentLoaded prêt à l'emploi après le chargement de l'arborescence dom. Pour le navigateur Safari, il existe un événement document.onreadystatechange Lorsque cet événement est déclenché, si document.readyState=complete, on peut considérer que l'arborescence DOM a été chargée.

Pour IE, lorsqu'il se trouve à l'intérieur d'une iframe, il existe également un événement document.onreadystatechange. Pour IE, lorsqu'il se trouve à l'intérieur d'une non-iframe, on ne peut juger si le dom est chargé que par la possibilité d'exécuter doScroll.

Dans cet exemple, essayez d'exécuter document.documentElement.doScroll('left') toutes les 5 millisecondes. Sous IE8, il y aura également un événement document.onreadystatechange lors de l'affichage de fenêtres non iframe. De plus, vous pouvez également utiliser cette fonction lors de la création de votre propre cadre.

Copier le code Le code est le suivant :

(function(){
var isReady=false ; // Détermine si la méthode onDOMReady a été exécutée
var readyList= []; // Stocke temporairement la méthode qui doit être exécutée dans ce tableau
var timer;
ready=function(fn)
{
if (isReady )
fn.call( document);
else
readyList.push( function() { return fn.call( this); });
renvoie ceci;
}
var onDOMReady=function(){
for(var i=0;i< readyList.length;i )
{
readyList[ i].apply(document);
}
readyList = null;
}
var bindReady = function(evt)
{
if(isReady) return;
isReady =true;
onDOMReady.call(window);
if(document.removeEventListener)
{
document.removeEventListener("DOMContentLoaded", bindReady, false);
}
else if(document.attachEvent)
{
document.detachEvent("onreadystatechange", bindReady);
if(window == window.top){
clearInterval(timer);
timer = null;
}
}
};
if(document.addEventListener){
document.addEventListener("DOMContentLoaded", bindReady, false);
}
sinon if (document.attachEvent)
{
document.attachEvent("onreadystatechange", function(){
if((/loaded|complete/).test(document.readyState))
bindReady() ;
});
if(window == window.top)
{
timer = setInterval(function(){
try
{
isReady| |document. documentElement.doScroll('left');//Utilise si doScroll peut être exécuté sous IE pour déterminer si le dom est chargé
}
catch(e)
{
return;
}
bindReady();
},5);
}
}
})();

Comment l'utiliser :

Copier le code Le code est le suivant :
prêt(faire quelque chose);//faire déjà quelque chose existe Function
//peut également être utilisé via Closure
ready(function(){
//Voici le code logique
});

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn