javascriptイベントのロードとプリロード
8970 ワード
通常はwindow.onloadで十分です.もし複数のイベントをロードしたいなら、私達は以下の方式を取ることができます.
[Ctrl+A全選注:外部Jsを導入するにはリフレッシュが必要です.]
しかし、このような有名な関数にはもう一つの欠陥があります.新しい負荷の関数は前の負荷関数の作用領域に置かれています.負荷関数が多いほど、そのスタックの階層が深くなり、明らかにエネルギー消費が大きいです.しかし、onclick、onload、onmouseoutなどの関数として、W 3 CはDOM 0のイベントモデルに属しています.利点は適用範囲が広いですが、その性能に署名して、DOM 1.0のイベントモデルとDOM 2.0のイベントモデルを提出しました.DOM 2は元マイクロソフトのイベントモデルと元ネットスケープのイベントモデルの折衷です.また、複数のタイプのイベントが結合されており、後者が前者をカバーすることはない.そこで人々は有名なaddEvent関数を出して、私達はaddEventを使って私達のイベントを改造してロードします.
[Ctrl+A全選注:外部Jsを導入するにはリフレッシュが必要です.]
OKです.大丈夫です.上のオンリーディー関数には画像のロードを待つオプションのパラメータがあります.JSエンジンはDOMツリーを完成してから画像やオーディオなどの処理を開始すると知っていますが、もし私たちのページがスクリプトレイアウトに大きく依存しているとしたら?早くページに大体の形を見せたいです.これはdomReadyを使います.もとの基礎から改善します.
window.onload = function(){
func1();
func2();
func3();
// ………………
}
//
<br>window.onload = function(){
<br>func1();
<br>func2();
<br>// ……
<br>}
<br>
window.onload = function(){
func1();
func2();
// ……
}
var loadEvent = function(fn) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
}else {
window.onload = function() {
oldonload();
fn();
}
}
}
loadEvent(func1);
loadEvent(func2);
loadEvent(func3);
//
(function(){
if(!window.JS){
window['JS'] = {}
}
var onReady = function(fn){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
}else {
window.onload = function() {
oldonload();
fn();
}
}
}
JS.onReady = onReady;
var $ = function(id){
return document.getElementById(id);
}
JS.$ = $;
})()
[Ctrl+A全選注:外部Jsを導入するにはリフレッシュが必要です.]
しかし、このような有名な関数にはもう一つの欠陥があります.新しい負荷の関数は前の負荷関数の作用領域に置かれています.負荷関数が多いほど、そのスタックの階層が深くなり、明らかにエネルギー消費が大きいです.しかし、onclick、onload、onmouseoutなどの関数として、W 3 CはDOM 0のイベントモデルに属しています.利点は適用範囲が広いですが、その性能に署名して、DOM 1.0のイベントモデルとDOM 2.0のイベントモデルを提出しました.DOM 2は元マイクロソフトのイベントモデルと元ネットスケープのイベントモデルの折衷です.また、複数のタイプのイベントが結合されており、後者が前者をカバーすることはない.そこで人々は有名なaddEvent関数を出して、私達はaddEventを使って私達のイベントを改造してロードします.
(function(){
if(!window.JS){
window['JS'] = {}
}
var addEvent = function( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj.attachEvent( "on"+type, function() {
obj["e"+type+fn]();
} );
}
};
var onReady = function(loadEvent,waitForImages) {
if(waitForImages) {
return addEvent(window, 'load', loadEvent);
}
}
JS.onReady = onReady;
var $ = function(id){
return document.getElementById(id);
}
JS.$ = $;
})()
[Ctrl+A全選注:外部Jsを導入するにはリフレッシュが必要です.]
OKです.大丈夫です.上のオンリーディー関数には画像のロードを待つオプションのパラメータがあります.JSエンジンはDOMツリーを完成してから画像やオーディオなどの処理を開始すると知っていますが、もし私たちのページがスクリプトレイアウトに大きく依存しているとしたら?早くページに大体の形を見せたいです.これはdomReadyを使います.もとの基礎から改善します.
(function(){
if(!window.JS){
window['JS'] = {}
}
var addEvent = function( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj.attachEvent( "on"+type, function() {
obj["e"+type+fn]();
} );
}
};
var onReady = function(loadEvent,waitForImages) {
if(waitForImages) {
return addEvent(window, 'load', loadEvent);
}
var init = function() {
if (arguments.callee.done) return;
arguments.callee.done = true;
loadEvent.apply(document,arguments);
};
if(!+"\v1"){
(function(){
try {
document.documentElement.doScroll("left");
} catch(e) {
setTimeout( arguments.callee, 0 );
return;
}
init();
})();
}else{
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
init();
}, false );
}
return true;
}
JS.onReady = onReady;
var $ = function(id){
return document.getElementById(id);
}
JS.$ = $;
})()
(function(){
if(!window.JS){
window['JS'] = {}
}
var addEvent = function( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj.attachEvent( "on"+type, function() {
obj["e"+type+fn]();
} );
}
};
var onReady = function(loadEvent,waitForImages) {
if(waitForImages) {
return addEvent(window, 'load', loadEvent);
}
var init = function() {
if (arguments.callee.done) return;
arguments.callee.done = true;
loadEvent.apply(document,arguments);
};
if(!+"\v1"){
if(window.self == window.top){
(function(){
try {
document.documentElement.doScroll("left");
} catch(e) {
setTimeout( arguments.callee, 0 );
return;
}
init();
})();
}else{
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
init();
}
});
}
}else{
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
init();
}, false );
}
return true;
}
JS.onReady = onReady;
var $ = function(id){
return document.getElementById(id);
}
JS.$ = $;
})()
(function(){
if(!window.JS){
window['JS'] = {}
}
var onReady = function(loadEvent) {
if(!+"\v1"){
(function(){
try {
document.documentElement.doScroll("left");
} catch(e) {
setTimeout( arguments.callee, 0 );
return;
}
loadEvent();
})();
}else{
document.addEventListener( "DOMContentLoaded", loadEvent, false );
}
}
JS.onReady = onReady;
var $ = function(id){
return document.getElementById(id);
}
JS.$ = $;
})()