解析页面加载与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 相关文章推荐
javascript Select标记中options操作方法集合
Oct 22 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
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定时任务延缓执行的实现
2014/10/08 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python中协程用法代码详解
2018/02/10 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
机械专业求职信
2014/05/25 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL