js 初始化装载步骤

js 初始化装载方法

?

JS 的初始化装载, onload 是最坏的选择, ?因为 onload 不是在 document 加载完成的时候调用的, 而是在页面所有元素 (包括图片等) 全部加载完成才会调用. 也就是说, 如果你的页面上有个尺寸很大的图片, 下载需要很长时间, 那么你的脚本就一直不能被初始化, 直到图片装载完成, 严重影响用户体验.

在 W3C 中有个叫?DOMContentLoaded?的事件, 故名思意, 它会在 DOM (文档对象模型) 被加载完成的时候触发. 那么我们就可以通过 document.addEventListener("DOMContentLoaded", init, false) ?方法调用初始化脚本的方法了.

但现在很多浏览器并不支持 DOMContentLoaded 事件,可以用以下方法进行处理.

// 如果支持 W3C DOM2, 则使用 W3C 方法if (document.addEventListener) {document.addEventListener("DOMContentLoaded", init, false); // 如果是 IE 浏览器(不支持)} else if (/MSIE/i.test(navigator.userAgent)) {// 创建一个 script 标签, 该标签有 defer 属性, 当 document 加载完毕时才会被载入document.write('<script id="__ie_onload" defer src="javascript:void(0)"></script>');var script = document.getElementById("__ie_onload");// 如果文档确实装载完毕, 调用初始化方法script.onreadystatechange = function() {if (this.readyState == 'complete') {init();}} // 如果是 Safari 浏览器(不支持)} else if (/WebKit/i.test(navigator.userAgent)) {// 创建定时器, 每 0.01 秒检验一次, 如果文档装载完毕则调用初始化方法var _timer = setInterval( function() {if (/loaded|complete/.test(document.readyState)) {clearInterval(_timer);init();}}, 10); // 如果以上皆不是, 使用最坏的方法 (本例中, Opera 7 将会跑到这里来)} else {window.onload = function(e) {init();}}

?