DDR爱好者之家

js页面加载后执行的几种方式小结
站长资源 2024/12/28 佚名
54 1538
DDR爱好者之家 Design By 杰米

在实际应用中往往需要在页面加载完毕之后再去执行相关的js代码，之所以这么操作是有道理的，如果是操作dom元素，如果相关元素没有加载完成，而去执行js代码，可能会导致错误，下面就介绍一下如何实现页面加载完成再去执行代码，这是最为基础的知识了，可能初学者还不太了解，寄希望能够给需要的朋友带来一定帮助。

一.window.onload事件:

代码如下:

原生js

window.onload=function(){
 //code
}

jquery

$(window).load(function(){
//code
});

当页面完全加载完毕之后再去执行code代码。说明页面需要dom操作，必须到最后才可以执行。

二.使用jQuery的ready事件:

$(document).ready(function() { 
 //code
});

一般

(function () {
//code
}
})();

当稳当结构加载完毕再去执行code代码。

通用的页面加载后再运行JS有两种方式：1、在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前运行JS。 2、在页面全部内容加载完成（包括引用文件，图片等）之后再加载JS

1、在DOM加载后，全部内容加载前运行
这种方式在同一文件中可以运行多个且不会覆盖。

由于在$(document).ready()方法只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用Jquery中 load（）方法在需要的文件加载完毕后对其进行操作。

$(document).ready(function(){});
$().ready(function(){})　　//简写 当$()不带参数时默认就是document
$(function(){});　　　　　　 //简写

2、在全部内容加载后运行
这种方式中只能执行一个 onload代码，当文件由多个onload或者load，只加载最后一个，前面的将会被覆盖且前面的onload里面的代码不会执行。

window.onload = function(){}; // —-js
$(window).load(function(){});　　 //---jquery

3、DOM文档加载步骤

1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕，执行window.onload

补充：

1：$(function){};

2：$(document).ready(function(){});

3：$(window).load(function(){});

4：window.onload = function(){};

5：在标签上静态绑定onload事件，<body onload="aaa()">等待body加载完成，就会执行aaa()方法。

注：第1种是第2种的简写方式。两个是document加载完成后就执行方法。第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别，只是一个使用dom对象，一个使用jQuery对象。

执行顺序：1和2无论放在哪里都是最先执行，3和4在其之后执行，5最后执行

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米