html 页面onready,前端自定义 window.onready （模仿 window.onload）和实用的 ready() 函数...

最新推荐文章于 2022-10-07 21:20:07 发布

泽柒

最新推荐文章于 2022-10-07 21:20:07 发布

阅读量1.6k

点赞数

文章标签： html 页面onready

本文介绍了如何自定义window.onready类似window.onload的行为，并提供两种方法来替代window.onload，便于多次调用。通过代码示例和测试，展示了如何在head中插入并使用这个模拟的onready函数，以及其在实际开发中的应用场景。

摘要由CSDN通过智能技术生成

浅析

web前端开发技术期末填空题

自定义 window.onready (模仿 window.onload)

插入到 head/

(function() {

this.Timer = function() {

if (window.onready) {

this.addEventListener(“DOMContentLoaded”, window.onready, false);

clearInterval(this.intervalId);

this.rel();

return;

}

console.log(window.intervalId);

}

this.rel = function() {

clearInterval(this.intervalId);

this.intervalId = undefined;

this.removeEventListener(“load”, this.loadHandler, false);

}

this.loadHandler = function() {

console.log(“load”);

this.rel();

}

this.addEventListener(“load”, this.loadHandler, false);

this.intervalId = setInterval(this.Timer);

})();[/code]

下面是写 window.onready

[code]window.onready = function(){

console.log(“ready”);

}[/code]

代码片段 1

/p>

touches

自定义 window.onready (模仿 window.onload)

插入到 head

;(function() {

this.Timer = function() {

if (window.onready) {

this.addEventListener(

‘DOMContentLoaded’,

window.onready,

false,

)

clearInterval(this.intervalId)

this.rel()

return

}

console.log(window.intervalId)

}

this.rel = function() {

clearInterval(this.intervalId)

this.intervalId = undefined

this.removeEventListener(‘load’, this.loadHandler, false)

}

this.loadHandler = function() {

console.log(‘load’)

this.rel()

}

this.addEventListener(‘load’, this.loadHandler, false)

this.intervalId = setInterval(this.Timer)

})()

/* ready 结束 */

/* 测试一下 */

window.onready = function() {

console.log(‘ready’)

console.log(‘再试试去了window.onready’)

}

查看 console.log 调试器(看看返回了什么，load, ready)。

上面的方法，只是供大家学习之用。在实现应用中，很不方便。window.onready 只能用一次。不能重复写。

下面的方法更实用一些，可以重复调用。

[code](function() {

window.ready = function(handler) {

document.addEventListener(“DOMContentLoaded”, handler, false);

}

})();[/code]

使用方法一：

[code]ready(function() {

console.log(“ready”);

});[/code]

使用方法二：

[code]window.ready(function() {

console.log(“window.ready”);

});[/code]

测试一下：

代码片段 2

/p>

touches

;(function() {

window.ready = function(handler) {

document.addEventListener(

‘DOMContentLoaded’,

handler,

false,

)

}

})()

ready(function() {

console.log(‘ready’)

})

window.ready(function() {

console.log(‘window.ready’)

})

查看 console.log 调试器(看看返回了 ready)。