解析页面加载与js函数的执行 onload or ready

 更新时间:2013年12月12日 09:30:57   作者:  
这篇文章主要介绍了页面加载与js函数的执行 onload or ready 需要的朋友可以过来参考下,希望对大家有所帮助

首先,页面加载顺序:
解析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');
}

相关文章

  • jQuery 选择同时包含两个class的元素的实现方法

    jQuery 选择同时包含两个class的元素的实现方法

    下面小编就为大家带来一篇jQuery 选择同时包含两个class的元素的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JQuery小知识

    JQuery小知识

    我们通常在执行一次ajax请求过后,需要更新界面上的某些内容,一般通过动态插入dom元素。
    2010-10-10
  • jquery和css3实现的炫酷时尚的菜单导航

    jquery和css3实现的炫酷时尚的菜单导航

    点击列表图表后,内容页面向内移动显示菜单项。当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位
    2014-09-09
  • JQUERY CHECKBOX全选,取消全选,反选方法三

    JQUERY CHECKBOX全选,取消全选,反选方法三

    最近一直研究JQUERY的CHECKBOX,前面我已经介绍了CHECKBOX的全选和取消全选,而今天我继续给大家分享第三种方法,同时还能实现CHECKBOX的反选和指定选取,当然我们得先下载
    2008-08-08
  • 6款新颖的jQuery和CSS3进度条插件推荐

    6款新颖的jQuery和CSS3进度条插件推荐

    进度条和Loading加载动画在当今的网页功能中显得越来越重要了,于是接下来为大家推荐几款比较新颖进度条插件,感兴趣的你可以参考下希望可以帮助到你
    2013-03-03
  • jQuery与JS加载事件用法分析

    jQuery与JS加载事件用法分析

    这篇文章主要介绍了jQuery与JS加载事件用法,结合实例形式分析了jQuery与JS加载事件的执行顺序与使用技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery链使用指南

    jQuery链使用指南

    这篇文章主要介绍了jQuery链使用方法,以及用哪些方法尅控制jQuery链,非常的详细,需要的朋友可以参考下
    2015-01-01
  • jquery小火箭返回顶部代码分享

    jquery小火箭返回顶部代码分享

    这篇文章主要介为大家详细绍了jquery小火箭返回顶部特效,当用户浏览到网页的最下端时,点击右下角的火箭可以返回到页面最顶部,滚动效果平滑,有需要的小伙伴可以参考下。
    2015-08-08
  • 基于jQuery实现选取月份插件附源码下载

    基于jQuery实现选取月份插件附源码下载

    这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单。
    2015-12-12
  • jQuery代码性能优化的10种方法

    jQuery代码性能优化的10种方法

    之前,我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今,我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架,使节点选择和DOM操作变得越来越容易,如果使用不当,有可能影响整个网页的响应速度。
    2016-06-06

最新评论