浅析web前端开发技术 |
web前端开发技术 大纲 |
web前端开发技术期末填空题 |
jquery 有个 ready 事件方法,它是怎么实现的呢?我在网上搜了搜看到了一个事件名称 DOMContentLoaded,文档内容加载完成时。它会 onload 之前触发。原来如此。很少人知道这东东。
我今天用它来打造一个 window.onready 。后来发现,监听器要写在定义 onready 属性之后,很突兀。不能和 onload 一样。怎么办。要自己写个监听 onready 属性有值的时候,再执行 DOMContentLoaded 事件。这个方法感觉总是不太好。谁有更好的方法。提供来大家学习一下。
[code]/
自定义 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
上面的方法,只是供大家学习之用。在实现应用中,很不方便。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
web前端开发新技术 |
前端开发技术树 |
web前端开发技术 答案 |
评论前必须登录!
注册