$(document).ready(function()和 window.onload()执行顺序

最新推荐文章于 2022-08-24 15:48:08 发布
最新推荐文章于 2022-08-24 15:48:08 发布
阅读量999 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39751320/article/details/106466648
版权
这篇博客详细介绍了DOM加载的过程，并对比了$(document).ready(function()和window.onload事件的执行顺序。$(document).ready在DOM结构加载完成后执行，而window.onload需等待所有资源（包括图片）加载完毕。总结中强调了DOM一旦加载完成，后续的$(function() {})总会执行，且它先于window.onload执行。
摘要由CSDN通过智能技术生成

https://blog.csdn.net/qq_34802511/article/details/82589487

一、DOM加载过程

网页文档加载都是按顺序执行的。一般浏览器渲染操作顺序大致是一下几个步骤：
1.解析HTML结构
2.加载外部脚本和样式表文件
3.解析并执行脚本代码
4.构造HTML DOM模型
5.加载图片等外部文件
6.页面加载完毕

一、$(document).ready(function()

$ (function() {}) 是$(document).ready(function()的简写，两者效果一样。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/common/js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(
最低0.47元/天 解锁文章
程序员掉头发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
$(document).ready(function() {})不执行初始化脚本
09-04
3. 如果可能，尝试将`$(document).ready()`中的代码移至`window.onload`事件中，看看是否能正常执行，以确定问题是否与DOM加载有关。 4. 如果有多个库在使用`$`，考虑使用`jQuery.noConflict()`来避免冲突。 通过...
window.onload和$(document).ready()的加载执行顺序
专注、专心、专业
05-08 1675
window.onload和jquery中的$(document).ready()的加载执行顺序:  近期在做一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，但IE下就要等个十几秒jquery的效果才出现，很是郁闷。  开始还以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).r
Window.onLoad 和 DOMContentLoaded事件的先后顺序
anddy926的专栏
04-06 2443
相信写js的，都知道window.onload吧，但是并不是每个人都知道DOMContentLoaded，其实即使你不知道，很有可能你也经常使用了这个东西。       一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中
$(document).ready(function(){})意思
H1453571548的博客
08-24 993
$(document).ready(function(){})表示文档结构已经加载完成（不包含图片等非文字媒体文件）
比windows.onload更早执行的方法
y3wegy的专栏
08-17 5646
最近在学习jQuery,里面牵涉到页面的加载问题,无意中看到这篇文章,觉得很好,估计以后能够用上,特意转贴于下: 原文地址:http://www.cnblogs.com/rubylouvre/archive/2010/04/15/1712780.html domReady第三版 新的版本放弃使用document.write()（实际上我们依赖的是script标签的
$(document).ready()、$(function(){})和windom.onload = function(){};
huang_yx的博客
03-23 1189
$(document).ready()与windom.onload = function(){}的方法说明和加载时机$(document).ready()的三种简写：$(document).ready(function(){})；$().ready(function(){})；$(function(){})区别：$(document).ready()方法的作用：当DOM加载完毕的时候，执行这个指定...
jQuery基础练习题一
Aoian的博客
04-05 9656
jQuery基础练习题一 选择题 1、下面对于jQuery的描述中，错误的是（） A、它的核心理念就是写的更少，做的更多 B、实现的代码更加简洁 C、有效的提高开发效率 D、jQuery跟JavaScript的用法是完全一样的 参考答案 : D 2、下列选项中，不能打开Chrome浏览器开发者工具的方式是（） A、按“F12”键打开 B、使用“Ctrl+Shift+U”快捷键打开 C、鼠标右击页面的任意位置，选择弹出菜单中“检查”选项 D、单击Chrome浏览器右上角的图标，展开菜单依次选择“更多工
jquery的$(document).ready()和onload的加载顺序
10-29
在JavaScript和jQuery的世界里，了解`$(document).ready()`和`window.onload`的加载顺序是非常重要的，尤其是在处理页面加载和交互效果时。这两个事件都与页面加载有关，但它们触发的时机有所不同，这也可能导致在...
JQ中$(window).load和$(document).ready区别与执行顺序
10-20
理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至关重要。 首先，`$(document).ready()`，也称为DOMContentLoaded事件，它会在浏览器解析完HTML文档并构建完DOM（文档对象模型）树时触发。这意味着...
浅析document.ready和[removed]的区别讲解
09-04
在JavaScript和jQuery的世界里，了解`document.ready`和`window.onload`的区别是非常重要的，因为它们决定了你的代码何时以及如何执行。这两个事件都是用来确保在执行JavaScript代码之前，页面的资源已经加载完毕，...
多个$(document).ready()的执行顺序实例分析
11-30
本文以实例形式说明了多个$(document).ready()的执行顺序问题，由实例可以看出多个$(document).ready()的执行顺序并非单纯的顺序执行，其与嵌套层级也有一定的关系。具体实例代码如下： <html> <head> [removed][removed] [removed] $(function(){ alert('1'); $(function(){ alert('2'); $(function(){ alert
原生JS实现document.ready以及和window.onload的先后顺序
掘金安东尼
07-23 785
在jQuery里面，我们可以看到两种写法: $(function(){}) $(document).ready(function(){}) 这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数, 注意，这里面的ready是DOM树加载完成，不是onload的页面资源加载完成的。 原生js本身并没有提供 document.ready方法 //document是一个DOM对象，这个对象本身没有ready方法，要使用就得自己定义，而且过程颇为复杂 //其中一种方法是： document.r
windows.onload和 document.ready区别
weixin_30311605的博客
10-09 124
在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。 而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比wi...
js在页面中的加载顺序及多个jquery $(document).ready() 的执行顺序
chimeiyan8610的博客
03-10 1778
jQuery $(document).ready()执行顺序： 当页面DOM 元素全部加载完毕后就执行.ready()。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 如果在.ready()执行之前有javascript代码存在，那么javascri...
window.onload 、$(function()function()）、;(function(){}());的执行顺序（初）
White feathe 的博客
04-29 5635
window.onload 、$(function()function()）、;(function(){}());三个的执行顺序：   ;(function(){}()); > $(function()function()） > window.onload<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
$(document).ready(function () {})和 window.onload = function () {}的区别
m0_37246536的博客
08-05 487
$(document).ready(function () {})和 window.onload = function () {}的区别：
$(document).ready(function()和 $(function()执行顺序
热门推荐
qq_34802511的博客
09-10 2万+
  版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chenggil10/article/details/51740824 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &l...
从一个例子了解window.onload、$(function(){})、$(window).load(function(){})的加载顺序
weixin_30430169的博客
05-23 294
最近遇到一个轮播需求： 1. ajax请求服务器，返回json，判断json数据里每一项中isFix属性是0还是1，0表示不轮播，1表示需要轮播。 2. 当isFix属性为0的时候，表示该图片不轮播，相反，isFix为1的时候，表示该图片需要轮播 3. 屏幕最多容纳6个图片，并且每个图片都有边距。不固定高度，自适应宽度。 4. 不轮播的图片固定在左边，轮播的图片需要在右边轮播，每次轮播的距...
js中有window.onload和<BODY>中的onload属性同时存在时
点滴记录 不断进步
08-20 1万+
转自于http://topic.csdn.net/u/20100608/14/aa805ed6-0820-47c7-b866-6dd93d90ea67.html （10楼） 情况一，window.onload指定的function是匿名的，则只执行后者，且动作是后者的动作。如： alert('a'); window.on
$(document).ready与$(function(){})()的区别以及执行顺序
最新发布
06-08
`$(document).ready()`与`$(function(){})`都是用来在页面加载完成后执行一些操作的。 它们的作用是一样的，都是在DOM结构加载完成后执行指定的函数。 区别在于语法和写法上的不同。`$(document).ready()`是jQuery提供的方法，而`$(function(){})`是jQuery的一种简写方式，两者本质上是相同的。也就是说，`$(function(){})`等价于`$(document).ready(function(){})`。 执行顺序是先执行`$(document).ready()`或`$(function(){})`，然后再执行页面中的其他JavaScript代码。在页面中只需要使用其中一个即可，不需要同时使用两个。 需要注意的是，`$(document).ready()`或`$(function(){})`只有在页面DOM结构加载完成后才会执行，如果需要在页面加载完成后执行其他操作，可以使用`window.onload`事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值