解析页面加载与js函数的执行 onload or ready


Posted in Javascript onDecember 12, 2013

首先,页面加载顺序:
解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
构造HTML DOM模型。
加载图片等外部文件。
页面加载完毕。

也就是:
html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img → script → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕。

JS 的初始化装载。

onload
不是在 document 加载完成的时候调用的, 而是在页面所有元素 (包括图片等) 全部加载完成才会调用.  如果页面上有尺寸很大的图片, 下载需要很长时间, 那么脚本就一直不能被初始化, 直到图片装载完成, 严重时用户体验会受到很大影响.但是,window.onload 也并非是一无用处,很多情况下一些B/S软件需要页面全部加载后才提供用户相关功能,这样 window.onload 就可以提供一种“加载中”的功能,又或者是页面内容很少,完全无需 document.ready(); 根据各种情况,应该合理的使用 onload 和 ready。

使用onload加载:

window.onload=function(){
            var currentRenderer = 'javascript';            
            FusionCharts.setCurrentRenderer(currentRenderer);
            var chartObj = new FusionCharts({
                swfUrl: "Pie3D.swf",
                width: "290", height: "210",
                id: 'sampleChart',
                dataSource: "/ucenter/seo/new_seo_tool.php?check=xml&val={{pre_num}}",
                dataFormat: FusionChartsDataFormats.XMLURL,          
                renderAt: 'chart1div'
            }).render();
            }

ready
在 W3C 中有个叫 DOMContentLoaded 的事件,它会在 DOM (文档对象模型) 被加载完成的时候触发.

方法一:

类似于Jquery的$(function(){...}) $(document).ready(function(){...})
(function () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
var d = document;
d.ready = function (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
if (ie)
(function () {
try { d.documentElement.doScroll('left'); run(); }
catch (err) { setTimeout(arguments.callee, 0); }
})();
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
};
})();

调用时:
document.ready(function(){
    alert('ok');
 }

方法二:

/如果支持 W3C DOM2, 则使用 W3C 方法 
if (document.addEventListener){ 
    document.addEventListener("DOMContentLoaded", te, false); 
}
else if (/MSIE/i.test(navigator.userAgent)){/如果是 IE 浏览器(不支持) 
    /创建一个 script 标签, 该标签有 defer 属性, 当 document 加载完毕时才会被载入 
    document.write("
    var script = document.getElementByIdx_x("__ie_onload"); 
    /如果文档确实装载完毕, 调用初始化方法 
    script.onreadystatechange = function() { 
        if (this.readyState == 'complete') { 
        te(); 
        } 
    } 
}
else if (/WebKit/i.test(navigator.userAgent)) {/如果是 Safari 浏览器(不支持) 
/创建定时器, 每 0.01 秒检验一次, 如果文档装载完毕则调用初始化方法 
var _timer = setInterval( function() { 
    if (/loaded|complete/.test(document.readyState)) { 
        clearInterval(_timer); 
        te(); 
    } 
    }, 10); 
}
else {/如果以上皆不是, 使用最坏的方法 (本例中, Opera 7 将会跑到这里来) 
    window.onload = function(e) { 
        te(); 
    }
}
function te(){
    alert('ok');
}
Javascript 相关文章推荐
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
js实现弹窗插件功能实例代码分享
Dec 12 #Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 #Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 #Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 #Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 #Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 #Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 #Javascript
You might like
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
node实现分片下载的示例代码
2018/10/17 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
程序员经常用到的UNIX命令
2015/04/13 面试题
应届生自我鉴定
2013/12/11 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
医院院务公开实施方案
2014/05/03 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014公司年终工作总结
2014/12/19 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
Python源码解析之List
2021/05/21 Python
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android