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

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(){
//ロジック コードは次のとおりです
});