解析页面加载与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中的Array对象使用说明
Jan 17 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
浅析JavaScript中的变量提升
Jun 01 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
python 字符串格式化代码
2013/03/17 Python
python代码实现ID3决策树算法
2017/12/20 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
中班开学寄语
2014/04/04 职场文书
新文化运动的基本口号
2014/06/21 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
调研汇报材料范文
2014/08/17 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
会计专业自荐信范文
2015/03/05 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
如何用python绘制雷达图
2021/04/24 Python
Vue如何实现组件间通信
2021/05/15 Vue.js
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL