页面加载进度条实现——readyState和onreadystatechange

最新推荐文章于 2024-07-19 15:32:49 发布
最新推荐文章于 2024-07-19 15:32:49 发布
阅读量1.4k 收藏
点赞数
分类专栏： DOM对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdmoment/article/details/84137039
版权

document.readyState 属性返回当前文档的状态（载入中……）。

共有四种取值：

1，uninitialized - 还未开始载入  uninitialized  英 [ʌnɪ'nɪʃlaɪzd]  未初始化

2，loading - 载入中

3，interactive - 已加载，文档与用户可以开始交互  interactive 英 [ˌɪntərˈæktɪv]   adj.互动的;互相作用的，相互影响的;[计]交互式的

4，complete - 载入完成

 

document.onreadystatechange：当页面加载状态改变的时候执行这个方法

onreadystatechange 事件通常用在基于 XMLHttpRequest 对象的 AJAX 应用中，当的该对象的 load state 改变时，会触发此事件。

但在 IE 中 onreadystatechange 事件是其私有实现的，用于数据加载的 IMG、SCRIPT 和 LINK 标记，常常被误用 onreadystatechange 事件而导致在非 IE 浏览器中无法得到预期结果。

 

知识扩展：onload，指示页面包含图片等文件在内的所有元素都加载完成。

支持该事件的 HTML 标签：<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的 JavaScript 对象：image, layer, window

1第一种：window.onload = function(){}
2第二种： window.onload ＝ functionName; //注意:没有括号
1<body onload="init();">

与window.onload事件相比，ready()具有较高的执行优先级

qdmoment
关注
专栏目录
AJAX（二）ResponseText、onreadystatechange 事件、readyState、status、ASP和PHP、数据库实例、XML实例
qq_43456781的博客
08-17 680
AJAX（二）ResponseText、onreadystatechange 事件、readyState、status、ASP和PHP、数据库实例、XML实例 文章目录AJAX（二）ResponseText、onreadystatechange 事件、readyState、status、ASP和PHP、数据库实例、XML实例1. 服务器响应（responseText）responseText 属性responseXML 属性2. onreadystatechange 事件（readyState、status
html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
weixin_28946137的博客
06-03 1282
在网上找资料的时候，看到网上有图片加载进度的效果，手痒就自己也写了一个。图片加载完后，隐藏loading效果。想看加载效果，请ctrel+F5强制刷新或者清理缓存。效果预览：0%代码如下：HTML5+javascript实现图片加载进度动画效果.loading {width:200px;height:200px;position:relative;margin:50px auto;border:1...
onreadystatechange
qizhanfeng的专栏
06-16 322
这两天，正在给部门的一个项目做优化，其中一项是将web应用中的所有alert用div方式实现，javascript的相关方法都写好了，方法名为showDialog，前台页面调用showDialog方法一点也没有问题，可是页面一旦提交，从后台输出脚本，调用showDialog方法，就会时不时的出现问题了，报一个无法打开Internet站点的错误，在脚本中下断点调试，依然找不到问题的根源，最...
通过HTML/CSS 实现各类进度条的功能。
最新发布
qq_44552416的博客
07-19 3468
需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用。通过本文学习我们会明白如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式。
Ajax里的onreadystatechange的作用是什么
刘阳龙Herman的专栏
09-12 557
<br />发送一个请求后，客户端无法确定什么时候会完成这个请求，所以需要用事件机制来捕获请求的状态，XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能。这类似于回调函数的做法。 onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果，如： ajaxObj=createAjaxObject(); var url="/MyTodoes/FetchText?id="+id; ajaxObj.open("
onreadystatechange事件
weixin_39249630的博客
01-12 4390
onreadystatechange事件 存储函数（或函数名），每当readyState属性改变时，就会调用该函数 readyState 存有XMLHTTPRequest的状态。从0到4发生变化。 0：请求未初始化1：服务器连接已建立2：请求已连接3：请求处理中4：请求已完成，且响应已就绪 status    200：“ok”   404：未找到页面
前端学习笔记——Ajax
lxy95512的博客
03-10 1332
URL地址 URL地址的概念 URL (全称是UniformResourcel ocator)中文叫统一资源定位符, 用于标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。 URL地址的组成部分 URL地址一般由三部组成: ①客户端与服务器之间的通信协议 ②存有该资源的服务器名称 ③资源在服务器上具体的存放位置 客户端与服务器的通信过程 客户端与服务器之间的通信过程,分为请求-处理-响应三个步骤。 如果要在网页中请
web前端之——图片上传
aijueju3902的博客
02-24 510
本文主要讨论以下两部分： 　　一、实现图片及时预览，将用户选中的图片及时显示在前台页面（利用FileReader实现）；不用通过后台接口返回的图片地址赋值给src再展示到前台，减少前后台的频繁交互； 　　 二、通过后台接口，将图片上传到服务器中（FormData）。 首先介绍一下h5新增的FileReader对象（）： FileReader:读取文件内容 ...
如何快速入门Ajax（学习笔记）—— 原生ajax、jQuery、axios
m0_67402096的博客
03-06 385
如何快速入门Ajax 1. 服务器的基本概念 客户端与服务器 URL地址 网页中如何请求数据 资源的请求方式 2. 了解Ajax Ajax是什么 Ajax的应用场景 3. jQuery中的Ajax get() post() ajax() 接口 4. form表单的基本使用 组成部分 属性 action target method enctype 表单的同步提交 缺点 解决方案 serialize() 函数 5. 原生Ajax XMLHttpRequest
从ajax异步请求封装和JSONP跨域封装到第三方库的使用
weixin_41105030的博客
05-16 737
##### GET请求的理解 1. 使用 AJAX 的过程可以类比平常我们访问网页过程 ```js // 1. 创建异步对象 --相当于打开一个浏览器 var xhr = new XMLHttpRequest() // 2. 打开与网址特定的链接 --相当于在地址栏输入访问地址 xhr.open('get','./01get.php') // 3. 通过链接发送一次请求 --相当于在浏览器输入回车发送请求 xhr.send(null) // 4. 指定 xhr 状态变化事件
onreadystatechange函数
摊开零乱的滋味
10-24 601
XMLHttpRequest的onreadystatechange函数， 在IE下，大小写不敏感， 在其它浏览器中必须为全小写
onreadystatechange 事件
热门推荐
sereasuesue的博客
09-09 1万+
onreadystatechange 事件 当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性： 属性 描述 onreadystatechange...
XSS之onreadystatechange事件
W小哥
06-29 484
一、测试代码 如下： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>IE9/10同时支持script元素的onload和onreadystatechange事件</title> <script src="http://code.jquery.com/jquery.min.js" onload="alert(1)" onreadystatecha
CSS样式（一）实现页面加载进度条
qq_42590021的博客
02-06 774
一、动画样式 #global_loading{ background: linear-gradient(to right,rgb(73, 149, 221),#fff,rgb(173, 203, 231)); height: 4px; position: fixed; z-index:999; width: 0; top: 0; left: 0; animation: grow 1.5s infinite forwards;//重复动画 } @keyframes grow{
AJAX —— onreadystatechange 事件
Hern（宋兆恒）
08-22 1139
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性： 属性 描述 onreadystatechange 存储函数（或函数名），每当 readyStat...
AJAX - onreadystatechange 事件
大Z小z的博客
07-02 697
AJAX - onreadystatechange 事件onreadystatechange 事件当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：属性描述onready...
开发入门篇之AJAX - onreadystatechange 事件
不写代码没饭吃的博客
07-12 914
onreadystatechange事件是在XMLHttpRequest对象的就绪状态（readyState）改变时触发的事件。就绪状态是指XMLHttpRequest对象的属性readyState的值。
关于ajax中的onreadystatechange
scwMason的博客
08-28 1240
先铺垫一下知识： readystate 属性存有 XMLHttpRequest 的状态信息，也就是代表着请求数据的过程，是由0~4代表，具体见（onreadystatechange） status：跟readystate一起变化的属性，200表示成功，404表示未找到页面，还有很多其他的值表示不同的问题 只要readystate变化，就会触发onreadystatechange方法 我们先...
AJAX进度条实现：动态创建与回调示例
AJAX (Asynchronous JavaScript and XML) 进度条实现是一种利用异步客户端脚本技术来提供动态网页交互体验的技术，特别是在数据加载过程中显示加载进度。在给定的代码示例中，开发者构建了一个简单的AJAX进度条，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值