window.onload和window.document.readystate

最新推荐文章于 2024-04-26 14:48:31 发布

转载最新推荐文章于 2024-04-26 14:48:31 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/july-lin/p/9358622.html

文章标签：

#javascript #ViewUI

最近做vue项目的时候遇到一个问题就是页面加载的时候就执行方法以至于方法里面需要通过js获取常数的变量获取不到参数从而报错

经过一番查找找到了onload完美解决问题

当页面所有的资源都加载完以后触发

window.document.readystate。这个属性有三个值 loading /interactive/complete

document正在下载的时候，返回loading；document完成了解析，但是资源还在下载的时候，返回interactive；document加载完成，并且所有resource都加载完毕,返回complete

window.onload和window.document.readystate==complete的触发先后顺序如何呢，经测试，onload先发生。

转载于:https://www.cnblogs.com/july-lin/p/9358622.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dlk6780

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

window.onload和DOMContentLoaded的区别

skysys的研究小屋

08-13

3040

一、何时触发这两个事件？ 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。二、为什么要区分？开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函

解决window.onload延迟加载问题

weixin_30432179的博客

06-23

714

window.onload方法，表示当页面所有的元素都加载完毕，并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容。这样肯定保证了代码在domReady之后执行。使用window.onload方法在文档外部资源不多的情况下不会有什么问题，但是当页面中有大量远程图片或要请求的远程资源时，我们需要让js在点击每张图片时，进行相应的操作，如果此时外部资源还没有加载完毕，点...

参与评论您还未登录，请先登录后发表或查看评论

window.onload和window.document.readystate的探究

angmiehuo9436的博客

01-06

932

在编写前端页面的时候，我们时常需要对页面加载的状态进行判断，以便进行相应的操作。比如在移动端，时常需要在页面完全加载完成之前，先显示一个loading的图标，等待页面完成加载完成后，才显示出真正要展现的页面元素。见代码1： <html> <head> <script src="http://code....

document.readyState等属性

叶知秋

08-29

314

document.readyState:判断文档是否加载完成。firefox不支持。这个属性是只读的，传回值有以下的可能： 0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。1-LOADING：加载程序进行中，但文件尚未开始解析。2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。3-INTERACTIVE：仅对已加载的部分文件有效，在此情况下...

浅谈document.ready和window.onload的区别

budaoweng0609的博客

01-19

3022

原文地址：https://www.cnblogs.com/a546558309/p/3478344.html在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。而window.onload是在d

一个document 的 Document.readyState 属性描述了文档的加载状态。

小米人的博客

09-26

634

当该属性值发生变化时，会在document 对象上触发readystatechange事件。 switch (document.readyState) { case "loading": // 表示文档还在加载中，即处于“正在加载”状态。 break; case "interactive": // 文档已经结束了“正在加载”状态，DOM元素可以被访问。 //...

document.readyState

weixin_30325793的博客

11-12

119

document对象的readyState有5种取值： 0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。 1-LOADING：加载程序进行中，但文件尚未开始解析。 2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。 3-INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。 4-COMPLET...

关于canvas动画用window.onload事件初始化动画，加载外部字体失败问题的解决方案

qq_46769552的博客

12-30

970

这两天帮别人利用canvas做一个简单的文字动画，碰到了一些问题。将自己踩坑和解决的思路记录如下。

window.onload兼容ie

07-21

要在Internet Explorer（IE）中兼容使用`window.onload`事件，可以使用以下代码： ```javascript ...通过使用`addLoadEvent`函数和`ieWindowLoad`函数，可以在IE浏览器中兼容使用`window.onload`事件。

使用 window.onload 和 document.readyState 来判断页面是否已经加载完毕，然后再使用 document.getElementsByTagName 获取页面中的所有图片、音频等元素，遍历判断每个元素的 complete 属性是否为 true

06-12

window.onload = function() { if (document.readyState === 'complete') { var elements = document.getElementsByTagName('img'); for (var i = 0; i < elements.length; i++) { if (!elements[i].complete) {...

[转载]document.readyState

李欢欢的博客

11-08

5556

原文：document.readyState document.onreadystatechange DOMContentLoaded 使用document.readyState和document.onreadystatechange搭配可以模拟出jquery ready和window.onload的效果。如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出...

document.readyState == "complete"

congyi.li的专栏

08-17

450

判断一个页面是否加载完成

AJAX中onload与onreadyState的区别

努力学习中

05-22

1329

1》首先我们可以先了解下AJAX的状态码。 0代表已经创建了ajax对象，但是还没有对ajax对象进行配置. 1代表已经配置了ajax对象，但是还没有发送请求 2代表请求已经送了 3代表已经可以接收到服务器的部分数据了 4代表服务器响应的数据已经接收完成 2》接下来我们创建AJAX对象，并查看下创建AJAX对象到接收到服务器响应数据后的状态码。 //首先使用onreadystateChange var xhr = new XMLHttpRequest(); console.log(xhr.readySta

document.readyState几种状态及示例

bobo now~

01-16

3234

说明这个属性是只读的，传回值有以下的可能： 0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。 1-LOADING：加载程序进行中，但文件尚未开始解析。 2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。 3-INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。 4-COMPLETE

页面加载过程中触发的事件

xiaoxiede_wo的博客

06-27

7192

readyState属性描述了文档的加载状态，在整个加载过程中 document.readyState会不断变化，每次变化都会触发readystatechange事件。 readyState的值变化： 1.loading（加载）文档被加载时 2.loaded （加载完毕）文档数据加载完毕 3.interactive（交互）文档结束加载并且被解析，可以操作对象，但部分资源还没有加载完成；...

页面生命周期：DOMContentLoaded，load，beforeunload，unload

LeviDing的博客

12-16

1647

DOMContentLoaded，load，beforeunload，unloadHTML 页面的生命周期包含三个重要事件：DOMContentLoaded —— 浏览器已完全加载 HT...

Ajax初步了解和简单应用

白小羽

05-15

285

1.简介基于 Web 的应用到基于数据的应用。它的广泛应用促进了前端技术的进步 ajax不是一种新的技术，而是几种原有技术的结合体，由以下技术组合而成： 1、使用CSS和XHTML来表示。页面渲染 2、使用DOM模型来交互和动态显示。 3、使用XMLHttpRequest来和服务器进行异步通信。 4、使用javascript来绑定和

JS时间加载线

qq_53632527的博客

10-08

128

在浏览器打开的一刻,记录了js按照顺序执行的事情步骤： 1.创建Document对象，开始解析web页面。解析html元素和他们支持的文本内容后，添加element 对象和text节点到文档中，这个阶段document.readyState=“loading”。 2.遇到link外部css，创建线程加载，并继续解析文档。 3.遇到script外部js，并且没有设置async，defer.（同步加载）浏览器加载并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。 4.遇到script外部..

vue判断页面是否加载完成后，执行事件