解析页面加载与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对象的比较
Feb 26 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP脚本的10个技巧(3)
2006/10/09 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
Python实现破解猜数游戏算法示例
2017/09/25 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python通过链接抓取网站详解
2019/11/20 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
virtualenv介绍及简明教程
2020/06/23 Python
详解Python模块化编程与装饰器
2021/01/16 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
青年教师培训方案
2014/02/06 职场文书
中青班党性分析材料
2014/02/16 职场文书
火锅店营销方案
2014/02/26 职场文书
企业党员公开承诺书
2014/03/26 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
买卖合同协议书范本
2014/10/18 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
刑事案件上诉状
2015/05/23 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python