JavaScript中DOMContentLoaded与load以及jQuery中ready和load的区别?

原创 野人  2022-04-13 09:12  阅读 24 次

标题有点长了,但是就是我本篇文章要讲的内容,因为我发现许多朋友,当然了也包含我自己,会对这一大堆,乱七八糟的写法,给搞蒙了,所以我觉得我自己有必要重新梳理下,巩固下。

先说下,JavaScript中DOMContentLoaded与onload。

DOMContentLoaded:当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载。

load:当整个页面及所有依赖资源如样式表和图片都已完成加载时,将触发load事件。它与DOMContentLoaded不同,后者只要页面DOM加载完成就触发,无需等待依赖资源的加载。

所以,来个代码实例吧,一目了然。

document.addEventListener("DOMContentLoaded", function () {
  console.log("DOMContentLoaded回调");
});

//监听load事件,有两种写法addEventListener和onload
//写法一
window.addEventListener("load", function () {
  console.log("load事件回调——写法一");
});
//写法二
window.onload = function () {
  console.log("load事件回调——写法二");
};

// 输出结果顺序为:
// DOMContentLoaded回调
// load事件回调——写法一
// load事件回调——写法二

原生的JavaScript讲完了,那就要说下关于jQuery中ready和load的区别了。

而实际上jQuery中ready和load的区别,也就是原生JavaScript中的DOMContentLoaded与load区别,因为JQuery中的这两个方法底层就是用原先写的。

而JQuery做的事情就有简化写法(具体的可以看下面的代码就是知道代码量少了多少),并处理兼容性的问题,这对于之前没有还没数据驱动这个概念的时候,JQuery在前端的位置就是number one,无可替代的,所以JQuery存在是有道理的,一个时代一代人把,尤其在技术变化飞快的现在,不是说不用JQuery了,而是用的少了,至少我这边接触到都是用Vue框架,React库任务。

随后我想了想,目前我用JQuery的场景,好像大部分都是在自己的站点,当然了为了不拉下现在的技术,我也是能用框架还是用框架的呢,毕竟快,准,狠,哈哈哈。

对了,来感受下关于jQuery中ready和load写法吧。

//DOMContentLoaded
$(document).ready(function () {
  console.log("reday");
});

//load
$(document).load(function () {
  console.log("load");
});

// 输出结果顺序:
// ready
// load

相关文章

https://blog.csdn.net/qq_32682137/article/details/86649209

https://www.jianshu.com/p/a870cdc8f89e

本文地址:https://www.yerenwz.com/6088.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论