window.onload=function(){}与$(function(){})的区别
浏览器页面文档加载完以后,会通过javascript为DOM元素添加事件,通常使用js方式有
window.onload=function(){}与document.onready=function(){},对应的,jquery方式使用$(window).load(function(){}) 与 $(document).ready(function(){})【简写:$().ready(function(){})或$(function(){})】;
注意点:
a、js方式不能同时编写多个,只会执行其中一个,而jquery方式可以编写多个,都可执行,不冲突
b、不管是js还是jquery,load方式必须等待页面所有内容加载完毕后(包括图片)才能执行,而ready方式则当页面dom结构绘制完毕后就执行,不必等待dom元素关联的内容加载完成
例如在ready中,获取图片的高度和宽度不一定能获取到,因为此时只加载了与图片相关的html,其图可能还没加载完成
(用chrome测试发现) 与load方法相关的只能用window对象不能用document对象,ready方法则js方式只能用document对象, jquery方式既可以用document对象也可以用window对象
window.onload=function(){ console.log(1); }; window.onload=function(){ console.log(2); }; //输出2 document.onready = function() { console.log(1); }; document.onready = function() { console.log(2); }; //输出2 $(window).load(function(){ console.log(1); }); $(window).load(function(){ console.log(2); }); //输出1,2