jqueryのready()メソッドを抽出し、単独で使用します。-jsチュートリアル-php.cn

jqueryのready()メソッドを抽出し、単独で使用します。

WBOY

リリース： 2016-05-16 16:54:32

オリジナル

1164 人が閲覧しました

windows.onload イベントを使用することもできますが、ページ上に大きな画像がある場合、onload はページ上のすべてのもの (img、iframe、その他のリソース) が読み込まれた後にのみ発生すると思います。とページに表示されます。実行に時間がかかりました。

DOM を操作するだけの場合は、ページが完全にロードされるまで待つ必要はありません。もっと速い方法が必要です。 Firefox には簡単に解決できる DOMContentLoaded イベントがありますが、残念ながら IE にはありません。

MSDN には、JSCRIPT メソッドに関する目立たない記述があります。ページ DOM がロードされていない場合、doScroll メソッドが呼び出されるときに例外が生成されます。次に、それを逆に使用します。例外がなければ、ページ DOM はロードされています。そのため、Mozilla および Opera ブラウザーの場合、dom ツリーがロードされた後に既製の DOMContentLoaded イベントが存在します。 Safari ブラウザの場合は、document.onreadystatechange イベントが発生し、document.readyState=complete の場合、DOM ツリーがロードされていると見なされます。

IE の場合、iframe 内にある場合は document.onreadystatechange イベントがあり、IE が iframe 以外の場合は doScroll が実行できるかどうかでのみ dom がロードされているかどうかを判断できます。

この例では、documentElement.doScroll('left') を 5 ミリ秒ごとに実行してみます。 IE8 では、iframe 以外のウィンドウを表示するときに document.onreadystatechange イベントも発生します。また、独自のフレームを構築するときにこの関数を使用することもできます。

コードをコピーコードは次のとおりです。

(function(){
 var isReady=false ; // onDOMReady メソッドが実行されたかどうかを判断します 
 varreadyList= []; // 実行する必要があるメソッドをこの配列に一時的に格納します 
 var timer; // タイマー ハンドル 
 
ready=function(fn) 
 {
 if (isReady )
 fn.call( document);
 else
readyList.push( function() { return fn.call( this); });
 return this;
 }
 var onDOMReady=function(){
 for(var i=0;i {
readyList[ i].apply(document);
 }
readyList = null;
 }
 var bindingReady = function(evt)
 {
 if(isReady) return;
 isReady =true;
 onDOMReady.call(window);
 if(document.removeEventListener)
 {
 document.removeEventListener("DOMContentLoaded", bindingReady, false);
 }
 else if(document.attachEvent)
 {
 document.detachEvent("onreadystatechange", bindingReady);
 if(window == window.top){
 clearInterval(timer);
 タイマー = null;
 }
 }
 };
 if(document.addEventListener){
 document.addEventListener("DOMContentLoaded", bindingReady, false);
 }
 else 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');//IE で doScroll を実行できるかどうかを使用して、DOM がロードされているかどうかを判断します 
 }
 catch(e)
 {
 return;
 }
 bindingReady();
 },5);
 }
 }
})();

使用方法:

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

ready(dosomething);//dosomething selected存在する Function
//closure
ready(function(){
 //ロジック コードは次のとおりです
});