文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jquery $(document).ready()与window.onload的区别

2.编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行...在常规的 Javascript 代码中，通常使用 window.onload 方法，而在jQuery中，使用的是$(document).ready() 方法，极大的提高Web应用程序的速度。...如果处理函数绑定给 window 对象，则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。...原理是对于 IE 在非 iframe 内时，只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。..., false ); // A fallback to window.onload, that will always work window.addEventListener

1.6K31
您找到你想要的搜索结果了吗？
是的
没有找到

DOMContentLoaded和window.onload

都知道window.onload吧，可是并非每一个人都知道DOMContentLoaded，事实上即使你不知道。非常有可能你也常常使用了这个东西。...普通情况下，DOMContentLoaded事件要在window.onload之前运行，当DOM树构建完毕的时候就会运行DOMContentLoaded事件，而window.onload是在页面载入完毕的时候...我们能够写代码来简单測试一下这两种事件： javascript代码（引入了jQuery1.4.1)： if (document.addEventListener){.../delay.png'); 在firefox和chrome以及opera中都能够清楚的看到，在图片未载入之前。id为status的段落已经显示了“DOM is ready now!”。...此代码并不能在IE中工作，一方面是由于我使用的是addEventListener，開始前做了个推断，不存在此方法则不加入此事件。

1.5K50

深入理解事件

window.onload = function(){ var outA=document.getElementById("outA"); outA.addEventListener...处于目标阶段：事件在上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。 冒泡阶段：事件又传播回文档。...由于outC是我们触发事件的目标对象，在outC上注册的几个事件处理函数都属于DOM事件流中的目标阶段。...这就是上面我们说的，在目标对象（outC）上绑定的函数是采用捕获，还是采用冒泡，都没有什么关系，因为冒泡和捕获只是对父元素上的函数执行顺序有影响，对自己没有什么影响。...虽然功能实现了，看着还挺好，但实际上无疑又增加了一个dom操作，在优化性能方面是不可取的，那么用事件委托的方式，能做到优化吗？

81740

Js框架设计之DomReady

当前页面上的所有的HTML标签都转换成DOM节点,这就叫DOM树建完,简称为DOMReady. 3、浏览器是自上向下,从左往右,HTML字符串标签一个一个的读入,页面上会有很多的标签,响相应的会生成很多的对应的...2、在标签浏览器, W3C终于绅士地提供了一个DOMContentLoaded事件;在旧式IE下,也可以勉强使用onreadystatechange事件模拟, 直接某一天,有个外国大牛发掘出doScroll...DomReady还可以满足用户提前绑定事件的需求,因为有时页面图片资源过多, window.onload迟迟不能触发,这时若还没有绑定事件,用户点哪个按钮都没有反应。...下,使Dom.domReady先于window.onload执行 //1、在老版本IE中onreadystatechange事件会触发在window.onload之后 /.../2、当页面包含图片时，onreadystatechange事件会触发在window.onload之后(换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时) document.attachEvent

1.5K60

清除浏览器cookie 原

火狐的在标签页背景上有一层透明度不是很好的偏白背景，扩展图标容易朦胧看不清晰，找了很多主题都无法改变这里，可能是别的地方需要设置一下？...Idge的和办公结合起来真是不错，自带笔记编辑功能很方便编辑保存，但是插件上在调试方面偏少一些，主题只找到默认的亮，暗两种，没找到商店里关于浏览器的主题插件 ? 随时做笔记，分享编辑保存很方便。...印象笔记等插件也有类似功能，不过浏览器自带不是更方便吗？ 3）.书签收藏栏默认可设置在左侧，对于浏览器来说，比放在上方更合适。当然，谷歌和火狐可以找到很多插件来满足使用要求。 ?...轻松拖拽，不想要头像的可以再这里取消 参考文档 1.解决Microsoft OneNote不能登录https://onedrive.live.com的问题：https://blog.csdn.net/liu_yulong...) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload

3.5K20

使用原生 JavaScript 在页面加载完成后处理多个函数

一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能。...使用监听器让脚本与 HTML 元素分离 监听器实际上的功能就是行为与内容分离的。...window.onload 事件 onload 事件只有在整个页面已经完全载入的时候才会被触发，我们将 JavaScript 代码写进 onload 事件中，就可以保证在 HTML 元素被加载完成之后，...那么，我们可以这样做，在一个 window.onload 事件中，写上所有需要加载的函数名，然后在外面定义函数： window.onload = function(){ func1(); func2...结合监听器和 window.onload 实现页面加载完处理多个函数 这里需要特别提到监听器的一个优势：可以为一个元素上的同一个事件添加或者去除多个处理函数。

2.7K20

JavaScript 事件委托 以及jQuery对事件委托的支持

事件委托具体是怎么工作的呢？ 我们从下面的简单的例子开始，给大家展示事件委托的工作原理。...我们思考这个问题，如果这个div1 下有非常多个 p元素，我们总不能每一个都写上形如document.getElementById("paraX").addEventListener("click",eventPerformed...另外，如果在实际的应用中，很有可能同过js在 div1下动态生成p 元素，这时候，我们相应地还要添加事件处理函数，像这种动态添加的动作很有可能分散在我们 应用的很多个角落，这样动态添加处理函数将是一个非常蛋疼的事儿...如果我们在js中动态地给box1 增加子元素P，相应的处理函数也会对其有效。...第二，理论上委托会导致浏览器额外的加载，因为在容器内的任意一个地方事件的发生，都会运行事件处理函数，所以多数情况下事件处理函数都是在空循环（没有意义的动作），通常不是什么大不了的事儿。

78560

用框架的你，可能早已忽略了这些事件API

window.onload 当整个页面，包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。...下面的这个示例正确显示了图片大小，因为 window.onload 会等待所有图片加载完毕： window.onload = function() { // 与此相同 window.addEventListener...自然地，当用户要离开的时候，我们希望通过 unload 事件将数据保存到我们的服务器上。...readyState 如果我们将 DOMContentLoaded 事件处理程序设置在文档加载完成之后，会发生什么？ 很自然地，它永远不会运行。 在某些情况下，我们不确定文档是否已经准备就绪。...complete —— 文档和资源均已加载完成，与 window.onload 几乎同时发生，但是在 window.onload 之前发生。

1.7K10

HTML解析之DOMContentLoaded和onload

实际上如果了解浏览器解析HTML规则就很清楚原因了，浏览器解析HTML由上往下依次执行，如果遇到会阻塞解析，先执行该JS脚本（如果是外部JS文件还要先加载），执行结束后再接着往下解析，所以上面获取不到...window.onload', document.readyState); } document.addEventListener('DOMContentLoaded', function...document.ready = function(fn){ if(document.addEventListener){ //现代浏览器 document.addEventListener...= fn; } } 总结 HTML文档加载步骤： 由上往下解析HTML结构。...虽然说还是要等script加载执行完成之后才会触发DOMContentLoaded，但现在很多现代浏览器为了更好地用户体验，能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。

1.6K20

优化谷歌联盟广告JS加载缓慢问题，提高网站页面的加载速度

早上跟彧繎博主聊天，看到他博客有一篇优化谷歌联盟js优化的文章，因为谷歌在国内尴尬的局面，在网页加载js的时候可能会比较拖拉，然后他又给我了一篇关于优化谷歌联盟js的文章，然后看了下自己网站的加载速度，...，就是着速度，嗖嗖地。。。...我们可以看见代码其实可以分成两段，其一是js代码，其次是代码，实际Google代码现在的思路很简单，关于js优化有两种方案，一种是设置setTimeout()函数，setTimeout() 方法用于在指定的毫秒数后调用函数...)         window.attachEvent("onload", downloadJSAtOnload);     else window.onload = downloadJSAtOnload...; 这样符合Google官方不能不能改变代码的要求，建议把js放在我们页面的head之内，即使多个页面都会统一调用，然后将和代码放在网页广告接口位置，例如：

8.5K50

解析Javascript事件冒泡机制

相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层 层层往上传递，直至传递到dom的根节点。...在这个基础上，我们实现下面的功能： a.body添加 click 事件监听，当body捕获到event事件时，打印出事件发生的时间和 触发事件的节点信息： window.onload = function() { document.getElementById("body").addEventListener("click",eventHandler...一般地，事件在传递过程中会有一些信息，这些是事件的组成部分：事件发生的时间+事件发生的地点+ 事件的类型+事件的当前处理者+其他信息， ? 完整的html代码如下： window.onload = function() { document.getElementById("box1").addEventListener

59940

【网页特性】geolocation | video | Web Workers | 拖拽 | FileReader | canvas操作 | 弧度与角度转换

H5新特性 geolocation 地理定位,获取用户设备的经纬度 video,audio 视、音频 WebSocket推送video , canvas+video 视频上做图像处理,如特效 canvas...子进程（工作进程） ：只能完成计算、数据请求等操作。 每个Web Workers都有自己的全局运行环境，其功能只是Javascript特性的一个子集。...//2 发送 w.postMessage({}); //w1.js //3、接收 //4、处理任务 //5、返回 //6、接收结果 多个进程能同时工作，充分利用资源 防止主进程卡机 不能执行任何UI...操作；子进程只能执行计算型任务； Web Workers在工作中用的很少——Web中计算型任务不多； 我们知道，js是单线程运行的，这个特点可能会造成当某个操作特别耗时的时候，页面出现崩溃或无响应的状态...Web Workers 能够赋予js多线程的能力，实质上是开启一个Web Workers线程，用于处理这些耗时的计算。

21110

优化谷歌联盟广告JS加载缓慢问题，提高网站页面的加载速度

早上跟彧繎博主聊天，看到他博客有一篇优化谷歌联盟js优化的文章，因为谷歌在国内尴尬的局面，在网页加载js的时候可能会比较拖拉，然后他又给我了一篇关于优化谷歌联盟js的文章，然后看了下自己网站的加载速度，...，就是着速度，嗖嗖地。。。...我们可以看见代码其实可以分成两段，其一是js代码，其次是代码，实际Google代码现在的思路很简单，关于js优化有两种方案，一种是设置setTimeout()函数，setTimeout() 方法用于在指定的毫秒数后调用函数...，所以我们可以优化下就js代码： window.onload = function() {     setTimeout(function() { let script = document.createElement...("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; 这样符合Google官方不能不能改变代码的要求

3.6K40

HTML5中的拖放功能

image 知识点 拖拽的体验，你享受过吗，在HTML5之前，可以使用事件mousedown，mousemove，mouseup巧妙实现页面的拖放操作，但注意拖放的操作范围只是局限在浏览器内部。...监听事件 window.addEventListener("load",DragStart,false); 添加dragover监听事件，给拖放的目标元素添加dragover监听事件，在事件触发时改变目标元素的样式...e.preventDefault(); },false); } // 添加函数DragStart到window.onload监听事件 window.addEventListener("load"...把添加监听事件的处理函数Drop()追加到window.onload事件中。...监听事件 window.addEventListener("load",Drop, false); 文件api 在html5中提供了关于文件操作的文件api,通过编程方式选择和访问文件数据。

2.6K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券