解析页面加载与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 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
js中Object.create实例用法详解
Oct 05 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 网页过期时间的控制代码
2009/06/29 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
JS控制伪元素的方法汇总
2016/04/06 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现的Excel文件读写类
2015/07/30 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
python 实现return返回多个值
2019/11/19 Python
办公室保洁员岗位职责
2013/12/02 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
优秀学生评语大全
2014/04/25 职场文书
公司授权委托书范文
2014/08/02 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
纪录片信仰观后感
2015/06/08 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书