解析页面加载与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 函数调用规则
Sep 14 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 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
DIY实用性框形天线
2021/03/02 无线电
php中json_encode中文编码问题分析
2011/09/13 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php写app用的框架整理
2019/09/29 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
通俗讲解python 装饰器
2020/09/07 Python
python各种excel写入方式的速度对比
2020/11/10 Python
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
类的核心特性有哪些
2014/01/01 面试题
自荐信结尾
2013/10/27 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
社区服务活动总结
2014/05/07 职场文书
医学检验专业自荐信
2014/09/18 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
会计求职自荐信
2015/03/26 职场文书
原告离婚代理词
2015/05/23 职场文书
新闻稿怎么写
2015/07/18 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
pandas提升计算效率的一些方法汇总
2021/05/30 Python
Spring实现内置监听器
2021/07/09 Java/Android