js加载顺序疑惑：window.load、document.body.load和$(function(){})

最新推荐文章于 2022-10-11 08:39:41 发布

最新推荐文章于 2022-10-11 08:39:41 发布 · 1.1k 阅读

文章标签：

#js加载顺序 #window.onload #$(function(){})

WEB前端同时被 2 个专栏收录

64 篇文章

订阅专栏

javascript

57 篇文章

订阅专栏

本文通过实验分析了不同浏览器环境下window.onload、document.body.onload和$(function())的执行顺序，并提供了测试代码及结果，帮助开发者理解页面加载过程中脚本执行的时机。

今天在看脚本加载的顺序，想探讨一下window.load和document.body.load和$(function(){})的执行顺序。我也没太研究明白，希望大神帮我一下，指明我前进的方向。我先谢了,我这想探讨的是为什么会出现这种情况，而不是说用哪种方式去实现加载，或者说规避这种情况。

浏览器使用Firefox32.0.3，Chrome39.0.2160.2,内核是31.0.1650.63版本的是360浏览器。我在stackoverflow上也查了一下，没有获得比较满意的答案。

jquery的$(function(){})首先加载是没有任何疑问的，$(function(){})的执行是在DOM准备好之后执行。

window.onload是在页面加载完成之后，包括加载完各种js、css、image资源才执行。

document.body.load或者直接在body标签上加onload()方法，是在页面加载到body的时候执行的。

也有可能我理解不正确，请批评指正。

在这三款浏览器中发现有些不同的现象。

代码1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test2</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
window.onload=function(){
console.log("window onload");
}
function init(){
console.log("body init");
}
$(function(){
console.log("dom ready="+$('#span').html());
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>

</html>

测试结果：

Firefox	Chrome31.0.1650.63	Chrome39.0.2160.2
dom ready=I love Internet!	dom ready=I love Internet!	dom ready=I love Internet!
body init	body init	window onload
		body init

代码2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test21</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>

function init(){
console.log("body init");
}
$(function(){
console.log("dom ready="+$('#span').html());
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
<script>window.onload=function(){
console.log("window onload");
}</script>
</body>

</html>

测试结果：

Firefox	Chrome31.0.1650.63	Chrome39.0.2160.2
dom ready=I love Internet!	dom ready=I love Internet!	dom ready=I love Internet!
window onload	window onload	window onload

代码3：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test3</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*window.onload=function(){
console.log("window onload");
}*/
$(window).load(function(){
console.log("window onload!");
})
function init(){
console.log("body init");
}
$(function(){
console.log("dom ready="+$('#span').html());
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>

</html>

测试结果：

Firefox	Chrome31.0.1650.63	Chrome39.0.2160.2
dom ready=I love Internet!	dom ready=I love Internet!	dom ready=I love Internet!
window onload!	window onload!	window onload!
body init	body init	body init

代码4：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test4</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*window.onload=function(){
console.log("window onload");
}*/
function init(){
//setTimeout(function(){
console.log("body init");
// },1000);
}
$(function(){
console.log("dom ready="+$('#span').html());
$(window).load(function(){
console.log("window onload!");
})
/*window.onload=function(){
console.log("window onload");
}*/
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>

</html>

测试结果：

Firefox	Chrome31.0.1650.63	Chrome39.0.2160.2
dom ready=I love Internet!	dom ready=I love Internet!	dom ready=I love Internet!
body init	body init	body init
window onload!	window onload!	window onload!

代码5：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test5</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*window.onload=function(){
console.log("window onload");
}*/
function init(){
//setTimeout(function(){
console.log("body init");
// },1000);
}
$(function(){
console.log("dom ready="+$('#span').html());
/*$(window).load(function(){
console.log("window onload!");
})*/
window.onload=function(){
console.log("window onload");
}
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>

</html>

测试结果：

Firefox	Chrome31.0.1650.63	Chrome39.0.2160.2
dom ready=I love Internet!	dom ready=I love Internet!	dom ready=I love Internet!
window onload	window onload	window onload

代码6：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test5</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*window.onload=function(){
console.log("window onload");
}*/
function init(){
//setTimeout(function(){
console.log("body init");
// },1000);
}
$(function(){
console.log("dom ready="+$('#span').html());
$(window).load(function(){
console.log("jquery window onload!");
})
window.onload=function(){
console.log("window onload");
}
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>

</html>

测试结果：

Firefox	Chrome31.0.1650.63	Chrome39.0.2160.2
dom ready=I love Internet!	dom ready=I love Internet!	dom ready=I love Internet!
window onload	jquery window onload!	jquery window onload!
jquery window onload!	window onload	window onload

代码7：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test7</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*window.onload=function(){
console.log("window onload");
}*/
function init(){
//setTimeout(function(){
console.log("body init");
// },1000);
}
$(function(){
console.log("dom ready="+$('#span').html());
window.onload=function(){
console.log("window onload");
}
$(window).load(function(){
console.log("jquery window onload!");
})

})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>

</html>

测试结果：

Firefox	Chrome31.0.1650.63	Chrome39.0.2160.2
dom ready=I love Internet!	dom ready=I love Internet!	dom ready=I love Internet!
window onload	window onload	window onload
jquery window onload!	jquery window onload!	jquery window onload!