解析页面加载与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 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
Java如何格式化日期
2012/08/07 面试题
分公司经理任命书
2014/06/05 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书