<!DOCTYPE html> <html> <head> <title>html页面加载顺序样例，js和jquery</title> <style> #show { border: 1px solid black; position: fixed; left: 300px; top: 300px; display: none; } </style> <!--加入jquery库--> <script src="~/lib/jquery/dist/jquery.min.js"></script> </head> <body> <div><img id="show" src="/image/1000.png" width="100" height="100" /> </div> <h1>html页面加载顺序样例，js和jquery</h1> <script> //启动一个1秒的间隔函数，函数体打印从零始开始累计的秒数 var ticks = 0; var int = setInterval(function () { console.log("1:", ++ticks); }, 1000); //jquery初始化调用函数 $(function () { console.log("jquery init ", ticks); clearInterval(int); $("#show").show(); }); //当整个文档标签加载完毕时调用(如果定义两个，执行后一个) document.ready = function (e) { console.log("document.ready", ticks); clearInterval(int); } </script> <script> //输出2000张图片到页面（后1999张是虚构的，加载图片是异步的） for (var i = 1; i <= 2000; i++) document.writeln('<img src="/image/' + i + '.png" width="100" height="100" />') console.log("2:", ++ticks); </script> <script> //整个页面的元素都加载完使才调用 window.onload = function (e) { console.log("窗体加载完毕2"); } </script> <script> //注册多少个DOMContentLoaded，按先后顺序执行（这个最先调用） document.addEventListener('DOMContentLoaded', function () { console.log("DOM内容加载完毕！"); }); </script> <div id="a1">123</div> </body> </html>