02-页面载入

页面载入

作者:曾庆林

window.onload方法长久以来是程序员解决客户端页面载入问题的一个方法,只有少数大型的图片文件会被快速的载入,而大部分大型的图片文件会使window.onload()载入的很慢.

DOM 1.0 加载方式

window.onload=init;
function init(){
    alert("abc");
}
window.onload=init2;
function init2(){
    alert("123");
}

多次使用后面的方法会覆盖前面的方法
DOM 2.0 加载方式(W3C)

window.addEventListener("load",init,false);
function init(){
    alert("abc")
}
window.addEventListener("load",init2,false);
function init2(){
    alert(123);
}

不兼容早期的ie浏览器

ie早期版本 加载方式

window.attachEvent("onload",init);
window.attachEvent("onload",init2);
function init(){
    alert("abc")
}
function init2(){
    alert(123);
}

兼容方式写法

function addEvent(elem,type,fn){
    if(elem.addEventListener){
        elem.addEventListener(type,fn,false);
    }else if(elem.attachEvent){
        elem.attachEvent("on"+type,fn);
    }
}
        
addEvent(window,"load",init1);  
addEvent(window,"load",init2);

function init1(){
    alert("abc")
}

function init2(){
    alert(123);
}

jQuery 页面加载写法

$(document).ready(function() {

});

简写

$(function(){

});

总结

标题 window.onload $(document).ready()
执行时机 必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码 只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码
执行次数 只能执行一次,如果第二次,那么 第一次的执行会被覆盖 可以执行多次,第N次都不会被上 一次覆盖
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,556评论 1 19
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,540评论 0 25
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • 猫咪洗澡三步曲 先来下花絮: 噢NO! N0……这不是本喵想要的! 洗澡前 喵星人出场: 想上垫子玩耍,然后好好思...
    一棵树的生长阅读 418评论 4 2
  • day 4,对角线构图法 对角线,最长的线,横跨整幅图片。 它带来至少俩种作用:1.分割画面;2.最长,可以体现出...
    简单的颐阅读 413评论 0 0