关于(function () { })(jQuery)与$(window).load(function () {})与$(document).ready(function () {})；加载顺序对比分

最新推荐文章于 2023-06-06 10:36:07 发布
最新推荐文章于 2023-06-06 10:36:07 发布
阅读量147 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38330185/article/details/107536717
版权 

<head>

    <title></title>
    <meta name="description" content="">
    <meta name="keywords"
        content="">
    <meta itemprop="dateUpdate" content="2020/7/7 11:36:24" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://www.supermap.com/cn2019/js/jquery-2.1.4.min.js"></script>

</head>

<body>
    <div>我的dom</div>
    <img src="https://www.supermap.com/cn2019/images/2501.gif" />
    <script>
        (function () {
            alert("DOM还没加载哦!");
        })(jQuery);
        $(window).load(function () {
            alert("完全加载出来了");
        });
        $(document).ready(function () {
            alert("dom加载了但图片还没加载");
        });
    </script>
</body>

</html>

需要引入jquery，同时为了比较$(window).load(function ()和$(document).ready(function ()，我引用了一个gif动图，方便看实际效果

最终得出的结论跟alert里的说明一样，了解加载顺序对实际开发有很大的帮助。

 

家里有个兔崽子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JQuery下关于$.Ready()的分析
10-29
本文主要讨论的是jQuery中的`$.ready()`方法及其与`onload`事件、`$(window).load()`方法的区别与应用。 首先，`$.ready()`方法，通常写作`$(document).ready()`，它的主要作用是在DOM（文档对象模型）完全加载完毕...
jquery函数
weixin_43975276的博客
10-23 164
独立的函数,不会直接运行(可以在dom标签里面onclick属性设置绑定函数,或者在函数里面调用函数): function function1(){ alert("function执行了"); }; 下面是常用的给事件绑定函数的方式: $(function (){ //函数逻辑 }) //上面的写法相当于下面的缩写,是jquery的一种写法,当页面DOM树加载完毕之后触发. $(document).ready(function(){ //函数逻辑 }) //所有资源加载完毕才会触发,和
JS中的 $(function(){ }) 是什么意思
JaneChelle
02-20 1万+
&amp;lt;script type=&quot;text/javascript&quot;&amp;gt; $(function(){ }); &amp;lt;/script&amp;gt; $(function(){ }) 是$(document).ready(function()的简写（JQuery写法：页面框架加载完成就执行） 相当于window.onload = function(){ } （JS写法：页面中所有内容加载完...
jQuery中$(function())的作用
最新发布
atarik@163.com
06-06 700
(function())等同于$(document).ready(function())，意思很简单，就是等页面加载完毕之后，才开始执行函数。
$ (function() {})的用法
qq_1872583947的博客
10-19 1771
JQuery 的代码我们通常会包裹在一个$(function(){})函数中，jq 的$(function(){})也就是$(document).ready(function(){})的简写，与之对应的原生 js 的window.onload事件，这俩者之间到底有什么区别呢？ $(function () { console.log("ready执行"); }); $(function() { console.log("ready1执行"); }); window.onload = fun
javascript中(function(){})($)与$(function)的区别
Wenco的博客
09-26 1万+
目录1. (function(){}())与(function(){})()2. 第二类是$(function(){}); 之前一直没弄清楚这两者的区别，只是发现多个(function(){})($)之间定义的方法是可以互通的，以为这个会比较好，实际运用中发现并不是这么简单的。 1. (function(){}())与(function(){})() 这两种写法，都是一种立即执行函数的写法，即...
jquery中ready()函数执行的时机和window的load事件比较
10-24
主要介绍了jquery中ready()函数执行的时机和window的load事件比较的相关资料,需要的朋友可以参考下
一张表格告诉你windows.onload()与$(document).ready()的区别
09-04
- 如果你仍然需要在所有资源加载完成后执行某些操作，jQuery 提供了 `$(window).load(function() {...})`，这与 `window.onload` 相似，但提供了jQuery的链式操作和其他便利。 总结来说，选择 `window.onload()` ...
jquery load事件(callback/data)使用方法及注意事项
10-27
jQuery 的 `load` 事件是用于监听某个元素内容加载完成的事件，它可以是整个页面或者特定元素。在本文中，我们将深入探讨 `load` 事件的使用方法、数据传递以及回调函数的用法。 首先，`load` 事件通常与元素的加载...
jQuery实现判断滚动条滚动到document底部的方法分析
10-16
同时，使用jQuery的`$(window).scroll()`方法可以更简洁地绑定滚动事件，而`$(this).scrollTop()`、`$(document).height()`和`$(this).height()`则分别对应JavaScript中的`getScrollTop`、`getScrollHeight`和`...
怎样理解(function($){...})(jQuery)
07-29
本示例主要用于揭示Jquery中的(function($){...})(jQuery)，欢迎下载!!!相关博客：http://blog.csdn.net/gaohuanjie/article/details/38268831
$(function() {})是干什么的及作用
梁同学与Android
02-27 2555
$(function() { }) 上面代码是绑定文档加载完成的监听，通俗的说，$()内的回调函数会在文档加载完之后立即执行。那 什么叫做文档加载完，就比如一整页的html代码，都是按照从上到下的顺序扫描，当扫描完所有内容的时候，就会执行 $(function() {})里面的内容 那我们为什么每次写代码的时候都要加上这个开头呢？ 因为当代码需要获取页面中的元素时，如果script标签在所获取...
$(function() {})是什么？
qq_45866386的博客
08-17 1532
$(function() {}) 是$(document).ready(function()的简写 意思很简单，就是等页面加载完毕之后，才开始执行函数， 什么时候执行？ DOM 加载完毕之后执行（DOM 就是一个 html 页面的标签树） 那么什么时候，DOM 加载完成了呢？即页面所有的 html 标签（包括图片等）都加载完了，即浏览器已经响应完了，加载完了，全部展现到浏览器界面上了。 总结 DOM 在第一次页面加载完毕后，就在内存里了，无论后面怎么通过 ajax 的方式去局部修改...
JS:$(function())作用
qq_41623154的博客
04-30 1万+
$(function())等同于$(document).ready(function()), 意思很简单，就是等页面加载完毕之后，才开始执行函数， 在没有使用$(function())之前，我的$("body").click()的操作不起作用，先执行函数了，此时DOM并没有加载完成，所以不起效果。在将js函数放入$(function())后，就可正常运行。 $(function(){/...
高手们，关于$(function()问题呢？
yll919120的博客
10-15 159
在提交form表单的时候 &lt;script type="text/javascript"&gt;    $(function(){         $("#logininfo").click(function(){             $.ajax({                 type:"post",                 url:"&lt;%=basePath%&gt...
jquery的$(function(){})和 window onload的区别
alokka的博客
09-04 1766
在Jquery里面，我们知道入口函数有两种写法:$(function(){}) 和$(document).ready(function(){}) 作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。 重点内容 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(d
$(function(){ });
zhangfeng1742的专栏
04-09 3734
$(document).ready(function(){ ... });可以简写成：$(function(){ ... });是在页面DOM加载完成后执行的代码，而window.onload需要页面DOM和图片都加载完成后才执行，所以前者效率更高 。$(document).ready() 里的代码是在页面DOM都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个s...
jquery中的$(function(){...})什么时候执行
evilcry2012的专栏
11-03 5963
jquery中的$(function(){...})什么时候执行 $(function () { var opName = getUrlParam('opname'); // var opName = "OP3040"; document.getElementById("txtName").value = opName; getplan(opName); getopname(opN
$(function(){ })的使用
热门推荐
隐藏人格2_mark的博客
05-09 4万+
JQuery 的代码我们通常会包裹在一个$(function(){})函数中，jq 的$(function(){})也就是$(document).ready(function(){})的简写，与之对应的原生 js 的window.onload事件，这俩者之间到底有什么区别呢？ $(function () { console.log("ready执行"); }); $(function...
前端jquery有多个window.load的执行顺序是啥
05-18
在前端 jQuery 中，如果有多个 `window.load`，它们的执行顺序是按照它们在代码中出现的顺序依次执行的。也就是说，先声明的 `window.load` 先执行，后声明的 `window.load` 后执行。 例如，如果有以下代码： ```javascript $(window).load(function() { console.log('First window.load'); }); $(window).load(function() { console.log('Second window.load'); }); ``` 那么，首先会执行第一个 `window.load`，输出 `First window.load`，然后才会执行第二个 `window.load`，输出 `Second window.load`。 需要注意的是，`window.load` 是在页面的所有资源都加载完成后才执行的，所以如果页面中存在大量的图片或其他资源，可能会导致 `window.load` 的执行比较慢。此外，建议使用 `$(document).ready()` 来代替 `window.load`，因为前者更快，同时也可以保证所有的 DOM 元素都已经加载完成。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值