解析页面加载与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下利用控制器载入对应脚本
Jul 17 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
Validform表单验证总结篇
Oct 31 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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中使用Oracle数据库(1)
2006/10/09 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python中的for循环
2018/09/28 Python
python实现自动登录后台管理系统
2018/10/18 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python代码实现猜拳小游戏
2020/11/30 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
注塑工厂厂长岗位职责
2013/12/02 职场文书
三方合作协议书范本
2014/04/18 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
大学生工作求职信
2014/06/23 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
公司奖励通知
2015/04/21 职场文书
小学生暑假生活总结
2015/07/13 职场文书
Python+Appium新手教程
2021/04/17 Python