通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式:

window.onload = function(){

       func1();
       func2();
       func3();
       //更多加载事件………………

}

但是如果我们需要页面完全呈现前做一些东西呢,如通过脚本加载其他js文件,或在IE6实现fixed……这些东西就要用到domReady 了,domReady好像是jQuery的叫做,一个加载函数。在W3C的草稿中,它其中是一种事件,名为 DOMContentLoaded。DOMContentLoaded事件比onload事件快许多,它是在DOM树建成之时就触发,而onload必须 要等待页面所有元素的资源都下载完毕时才触发。在标准游览器中调用这个事件很简单的:

document.addEventListener('DOMContentLoaded', function(){
   alert("DOM树建成了!")
 }, false);

IE虽然有这么多私有事件,但却没有一个与它相同的,最接近的是readystatechange,加上其他乱七八糟的东西,我们还是能够模拟DOMContentLoaded的。

有时我们加载事件时,可能不是单是通过一个函数就加载完的。比如我要用window.onload加载一段代码,但我还通过JS文件加载一个开源插 件,那个插件当它要处理DOM,还是需要等到DOM树完成之时,因此它可能也要搞一个window.onload块。这时页面拥有两个 window.onload代码块,很显然,第二个会覆盖掉第一个。这时,我们就要用到loadEvent这样的多重加载函数了。

var loadEvent = function(fn) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = fn;
    }else {
        window.onload = function() {
            oldonload();
            fn();
        }
    }
}
//*******************用法*******************
loadEvent(handler1);
loadEvent(handler2);
loadEvent(handler3);

在标准游览器中,因为有addEventListener,很轻松就实现DOMContentLoaded的多重加载,那IE怎么办?唯一的办法 是,无论是addEventListener还是attachEvent都执行,把多个要加载的代码整合到一块,一次性执行。因此,我们需要一个数组。

window.DOMLoadEvents = [];
 
var addDOMLoadEvent = function(handler) {
    window.DOMLoadEvents[window.DOMLoadEvents.length]=handler
}
 
addDOMLoadEvent(handler);
addDOMLoadEvent(handler);
addDOMLoadEvent(handler);
//更多加载事件

那么怎样执行它们,上面仅仅是添加事件,我们需要另一个函数,专门用来执行它的。

var fireContentLoadedEvent = function() {
    if (arguments.callee.loaded) return;
    //让此函数仅仅执行一次
    arguments.callee.loaded = true;
    var handlers = window.DOMLoadEvents,length = handlers.length;
    for (var i=0; i<length; i++) {
        var func = handlers[i];
        func();//执行要在domReady运行的代码
    }
}

那么我们要在什么时候执行上面的函数呢?我们仅讨论IE的情况。在IE中,任何DOM元素都有一个doScroll 方法,无论它们是否支持滚动条。为了判断DOM树是否建成,我们只看看documentElement是否完整就是,因为,它作为最外层的元素,作为 DOM树的根部而存在,如果documentElement完整的话,就可以调用doScroll方法了。当页面一加载JS时,我们就执行此方法,当然要 如果documentElement还不完整就会报错,我们在catch块中重新调用它,一直到成功执行,成功执行时就可以调用 fireContentLoadedEvent 方法了。

参数 描述
scrollbarDown Default. Down scroll arrow is at the specified location
scrollbarHThumb Horizontal scroll thumb or box is at the specified location
scrollbarLeft Left scroll arrow is at the specified location
scrollbarPageDown Page-down scroll bar shaft is at the specified location
scrollbarPageLeft Page-left scroll bar shaft is at the specified location
scrollbarPageRight Page-right scroll bar shaft is at the specified location
scrollbarPageUp Page-up scroll bar shaft is at the specified location
scrollbarRight Right scroll arrow is at the specified location
scrollbarUp Up scroll arrow is at the specified location
scrollbarVThumb Vertical scroll thumb or box is at the specified location
down Composite reference to scrollbarDown
left Composite reference to scrollbarLeft
pageDown Composite reference to scrollbarPageDown.
pageLeft Composite reference to scrollbarPageLeft.
pageRight Composite reference to scrollbarPageRight.
pageUp Composite reference to scrollbarPageUp.
right Composite reference to scrollbarRight.
up Composite reference to scrollbarUp.
var  pollDoScroll = function() {
    try {
        document.documentElement.doScroll('left');
    }catch(e) {
        setTimeout(arguments.callee, 10);
        return;
    }
    fireContentLoadedEvent();
}

我们要页面加载JS立即执行此函数,是直接pollDoScroll()吗?!不要忘记,它只是应用于IE中,我们还要判定一下浏览器。如果支持 addEventListener,也肯定支持DOMContentLoaded了(不考虑旧版本),否则就运行pollDoScroll函数。

if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
} else {
    pollDoScroll();
}

完整的代码如下:

window.DOMLoadEvents = [];
var addDOMLoadEvent = function(handler) {
    window.DOMLoadEvents[window.DOMLoadEvents.length]=handler
}
var fireContentLoadedEvent = function() {
    if (arguments.callee.loaded) return;
    //让此函数仅仅执行一次
    arguments.callee.loaded = true;
    var handlers = window.DOMLoadEvents,length = handlers.length;
    for (var i=0; i<length; i++) {
        var func = handlers[i];
        func();//执行要在domReady运行的代码
    }
}
var pollDoScroll = function() {
    try {
        document.documentElement.doScroll('left');
    }catch(e) {
        setTimeout(arguments.callee, 10);
        return;
    }
    fireContentLoadedEvent();
}
if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
} else {
    pollDoScroll();

}

javascript的页面加载及性能优化(兼容IE7)的更多相关文章

  1. 前端开发,页面加载速度性能优化,如何提高web页面加载速度

    一个网页访问速度的快慢,  不仅看它服务器的配置,这里除去你空间主机配置很烂的情况以外,我们从网站开发方面来探讨,前端技术需要从哪些方面提高访问的速度,需要用到哪些技术手段. 文件的加载 图标的加载: ...

  2. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  3. webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载

    webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载 原文:https://my.oschina.net/u/2344787/blog/400 ...

  4. 一步一步实现listview加载的性能优化

    listview加载的核心是其adapter,本文针对listview加载的性能优化就是对adpter的优化,总共分四个层次: 0.最原始的加载 1.利用convertView 2.利用ViewHol ...

  5. Javascript在页面加载时的执行顺序【转】

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  6. javascript 实现页面加载完再显示页面

    document.onreadystatechange = function () { if (document.readyState == "complete") { docum ...

  7. JavaScript Html页面加载完成

    //一.Html页面加载完成的JS写法 //1. $(function () {     alert("窗体Html页面加载完成方法一"); }); //2. $(document ...

  8. JavaScript Html页面加载完成三种写法

    //一.Html页面加载完成的JS写法 //1. $(function () {     alert("窗体Html页面加载完成方法一"); }); //2. $(document ...

  9. javascript 实现页面加载完的操作

    document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...

随机推荐

  1. 加工生产调度(prod)

    加工生产调度(prod) 题目描述 有n个部件需在A.B机器上加工,每个工件都必须经过先A后B两道工序. 已知:部件i在A.B机器上的加工时间分别为ai,bi. 问:如何安排n个工件的加工顺序,才能使 ...

  2. java中从含反斜杠路径截取文件名的方法

    例如:获取到的文件路径为C:\Documents and Settings\Leeo\My Documents\logo.gif现在想要取得图片的名称logo.gif,我们知道反斜杠“\”是转义字符, ...

  3. java source map

    Chrome 更新后出现了 jquery.min.map 404  (Not Found) 的信息 这个到底是什么东西?查询了一下,得到了以下资料 JQuery 官方解释 摘录一下內容 从 jQuer ...

  4. 阿里dom操作题

    请写一个 getParents 方法让它可以获取某一个 DOM 元素的所有父亲节点. function getParents(id){ var obj=document.getElementById( ...

  5. gnome3 no launcher

    http://askubuntu.com/questions/43246/how-to-configure-gnome-3-to-show-icons-on-desktop http://superu ...

  6. mysql 触发器学习

    1. 一个简单的例子 1.1. 创建表: create table t(s1 integer); 1.2. 触发器: delimiter | create trigger t_trigger befo ...

  7. 转载:org.apache.catalina.util.DefaultAnnotationProcessor cannot be cast to org.apache.Annotation

    转载:org.apache.catalina.util.DefaultAnnotationProcessor cannot be cast to org.apache.Annotation (2012 ...

  8. Mariadb galera 群集

    环境:  CentOS 7 x64  *  3 IP : 192.168.0.100 IP : 192.168.0.101 IP : 192.168.0.102 配置mariadb YUM 源 htt ...

  9. (中等) HDU 3416 Marriage Match IV,SPFA+SAP。

    Description Do not sincere non-interference. Like that show, now starvae also take part in a show, b ...

  10. 为HTTP分类作序

    作者:zccst 曾经,认为对HTTP已经非常熟悉了,觉得不需要学习什么,知道2014年春天,让我感觉到自己是如此的无知. 举例: 1,对HTTP头部信息知道多少?每一个字段分别都可以取哪些值,每一个 ...