ホームページ > 記事 > ウェブフロントエンド > Dom は、画像をロードして実行できるようにするスクリプト コードをロードします_javascript スキル
Dom は、画像をロードして実行できるようにするスクリプト コードをロードします_javascript スキル
- WBOYオリジナル
- 2016-05-16 19:04:42834ブラウズ
ここで、この問題を解決する方法を検討してみましょう。解決策は、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("
/*
* (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("