Dom は、画像をロードして実行できるようにするスクリプトコードをロードします

ここで、この問題を解決する方法を検討してみましょう。解決策は、DOM がロードされた後にプログラムを実行することです。

まずは二人を紹介します。 1 人は jquery の作者である John Resig、2 人は JavaScript の世界的マスターであるディーンエドワーズです。 (この 2 人の天才を皆さんも覚えておいてください!)

jquery には、特に DOM の読み込みを解決する関数 $(document).ready() (略称は $(fn)) があり、非常に使いやすいです。「Pro JavaScript Techniques」では、John Resig が DOM ロードを処理するためのメソッドを紹介しています。その原理は、document&& document.getElementsByTagName &&document.getElementById&& document.body を使用して Dom ツリーがロードされているかどうかを判断することです。コードは次のとおりです:

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

function domReady( f ) { 
// DOM がロードされている場合は、関数をすぐに実行します 
if ( domReady.done ) return f() 
// を追加した場合a function 
if ( domReady.timer ) { 
// 実行する関数のリストに追加します 
domReady.ready.push( f ); else { 
//ページをロードします。イベントのバインドを完了します。
// 最初に完了しないようにするには、addEvent (以下にリストします) を使用します。
addEvent( window, “load”, isDOMReady ); // 関数を初期化します。 Array of 
domReady.ready = [ f ]; 
// Dom が利用可能かどうかをすぐに確認できます 
domReady.timer = setInterval( isDOMReady, 13 ); 
} 
// Dom が動作可能かどうかを確認します 
 function isDOMReady() { 
// Dom が動作可能であることが確認された場合は無視します 
if ( domReady.done ) return false; 
// 複数の関数と要素が利用可能かどうかを確認します
if (document && document.getElementsByTagName && document.getElementById && document.body) { 
// 利用可能な場合は、チェックを停止します
clearInterval( domReady.timer); 
domReady .timer = null; 
 // すべての待機中の関数を実行します 
for ( var i = 0; i 
domReady.ready.length) [i](); 
// ここで記録が完了しました 
domReady.ready = null; 
} 
} 
// ディーン・エドワーズ著2005 addEvent/removeEvent、
// Tino Zijdel 主催
// http://dean.edwards.name/weblog/2005/10/add-event/ 
//利点は 1.すべてのブラウザで動作します。
///2.this は現在の要素を指します。
//3. デフォルトの動作を防ぎ、イベントのバブリングを防ぐ関数です。バブリング段階でのみ機能します
function addEvent(element, type, handler) { 
 // 各イベント ハンドラーに一意の ID を割り当てます 
 if (!handler.$$guid) handler.$$guid = addEvent.guid ; 
 // 要素のイベント タイプのハッシュ テーブルを作成します 
 if (!element.events) element.events = {} 
 // それぞれのイベント ハンドラーのハッシュ テーブルを作成します要素/イベントのペア 
 var handlers = element.events[type]; 
 if (!handlers) { 
 handlers = element.events[type] = {}; // 既存のイベントを格納します。ハンドラー (存在する場合) 
 If (Element ["on" Type]) {
 Handler [0] = Element ["On" Type] 
} 
} 
 // everr をハッシュ テーブルに保存します。 
 handlers[handler.$$guid] = handler; 
 // すべての処理を実行するグ​​ローバル イベント ハンドラーを割り当てます。 
 element["on" type] = handleEvent; 🎜>}; 
/ / 一意の ID を作成するために使用されるカウンター 
addEvent.guid = 1; 
function RemoveEvent(element, type, handler) { 
 // ハッシュからイベント ハンドラーを削除table 
 if (element. events && element.events[type]) { 
 element.events[type][handler.$$guid] を削除します。; 
function handleEvent(event) { 
 var returnValue = true; 
 // イベント オブジェクトを取得します（IE はグローバル イベント オブジェクトを使用します） 
 event = event || fixEvent(window.event); 
 // イベント ハンドラーのハッシュ テーブルへの参照を取得します 
 var handlers = this.events[event.type]; 
 // 各イベント ハンドラを実行 
 for (var i in handlers) { 
 this.$$handleEvent = handlers[i]; 
 if (this.$$handleEvent(event) === false) { 
 returnValue = false; 
 } 
 } 
 return returnValue; 
}; 
function fixEvent(event) { 
 // W3C 標準 イベント メソッドを追加 
 event.preventDefault = fixEvent.preventDefault; 
 event.stopPropagation = fixEvent.stopPropagation; 
 リターン イベント; 
}; 
fixEvent.preventDefault = function() { 
 this.returnValue = false; 
}; 
fixEvent.stopPropagation = function() { 
 this.cancelBubble = true; 
};

にも、同様の機能を実現する、外国大作家による宣伝が含まれています。 >

代码如下:

/*
* (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
* Dan Webb の domready.js Prototype extension
* と Simon Willison の addLoadEvent に感謝します
*
* 詳細については、次を参照してください:
* http://www.thefutureoftheweb.com/blog/adddomloadevent
* http://dean.edwards.name/weblog/2006/06/もう一度/
* http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
* http://simon.incutio.com/archive /2004/05/26/addLoadEvent
*
*
* 使用方法: addDOMLoadEvent を関数で 1 回または複数回呼び出します。つまり、
*
* function something() {
* // do something
* }
* addDOMLoadEvent(something);
*
* addDOMLoadEvent(function() {
* // その他のことを行います
* });
*
*/

addDOMLoadEvent = (function(){
// create event function stack
var load_events = [],
load_timer,
script,
done,
exec,
old_onload,
init = function () {
done = true;
/ / タイマーを強制終了します
clearInterval(load_timer); // 追加された順序でスタック内の各関数を実行します
while (exec = load_events.shift())

if (script) script.onreadystate;変更 = ''; > };
return function (func) {
// init 関数がすでに実行されている場合は、今すぐこの関数を実行し、
if (done) return func();もし(! load_events[0]) {
// Mozilla/Opera9 の場合
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", init, false); 🎜> // Internet Explorer の場合
/*@cc_on @*/
/*@if (@_win32)
document.write("

人気のチュートリアル

詳細>

Dom は、画像をロードして実行できるようにするスクリプト コードをロードします_javascript スキル

Dom は、画像をロードして実行できるようにするスクリプトコードをロードします_javascript スキル