十年专注于品牌网站建设 十余年专注于网站建设_小程序开发_APP开发,低调、敢创新、有情怀!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

元素的加载状态判断readystatechange事件使用方法及注意事项

百恒网络 2017-01-02 17873

关于readystatechange 事件也是常用事件之一,为了提高用户的交互体,特别是在H5及移动端我们用得比较多,所以在此通过学习记录向大做一个详细介绍,希望对前端开发人员有所帮助。
       IE为 DOM文档中的某些部分提供了 readystatechange 事件。这个事件的目的是提供与文档或 元素的加载状态有关的信息,但这个事件的行为有时候也很难预料。支持 readystatechange 事件的 每个对象都有一个 readyState 属性,可能包含下列 5个值中的一个。
       uninitialized(未初始化):对象存在但尚未初始化。 
       loading(正在加载):对象正在加载数据。
       loaded(加载完毕):对象加载数据完成。
       interactive(交互):可以操作对象了,但还没有完全加载。
       complete(完成):对象已经加载完毕。
       这些状态看起来很直观,但并非所有对象都会经历 readyState 的这几个阶段。换句话说,如果某 个阶段不适用某个对象,则该对象完全可能跳过该阶段;并没有规定哪个阶段适用于哪个对象。显然, 这意味着 readystatechange 事件经常会少于 4次,而 readyState 属性的值也不总是连续的。
       对于 document 而言,值为"interactive"的 readyState 会在与 DOMContentLoaded 大致相 同的时刻触发 readystatechange 事件。此时,DOM树已经加载完毕,可以安全地操作它了,因此就会进入交互(interactive)阶段。但与此同时,图像及其他外部文件不一定可用。下面来看一段处理 readystatechange 事件的代码。 

EventUtil.addHandler(document, "readystatechange", function(event){
        if (document.readyState == "interactive"){ 
              alert("Content loaded"); 
       } 
       }); 

这个事件的 event 对象不会提供任何信息,也没有目标对象。 
       在与 load 事件一起使用时,无法预测两个事件触发的先后顺序。在包含较多或较大的外部资源的 页面中,会在 load 事件触发之前先进入交互阶段;而在包含较少或较小的外部资源的页面中,则很难 说 readystatechange 事件会发生在 load 事件前面。 
       让问题变得更复杂的是,交互阶段可能会早于也可能会晚于完成阶段出现,无法确保顺序。在包含 较多外部资源的页面中,交互阶段更有可能早于完成阶段出现;而在页面中包含较少外部资源的情况下, 完成阶段先于交互阶段出现的可能性更大。因此,为了尽可能抢到先机,有必要同时检测交互和完成阶 段,如下面的例子所示。 

EventUtil.addHandler(document, "readystatechange", function(event){
        if (document.readyState == "interactive" || document.readyState == "complete"){ 
              EventUtil.removeHandler(document, "readystatechange", arguments.callee);
               alert("Content loaded"); 
       } 
       }); 

对于上面的代码来说,当 readystatechange 事件触发时,会检测 document.readyState 的值, 看当前是否已经进入交互阶段或完成阶段。如果是,则移除相应的事件处理程序以免在其他阶段再执行。 注意,由于事件处理程序使用的是匿名函数,因此这里使用了 arguments.callee 来引用该函数。然 后,会显示一个警告框,说明内容已经加载完毕。这样编写代码可以达到与使用 DOMContentLoaded 十分相近的效果。
        支持 readystatechange 事件的浏览器有 IE、Firfox 4+和 Opera。 
       虽然使用 readystatechange 可以十分近似地模拟 DOMContentLoaded 事件, 但它们本质上还是不同的。在不同页面中,load 事件与 readystatechange 事件并 不能保证以相同的顺序触发。 
       另外,


       

This example loads a JavaScript file and a CSS file dynamically. The script code works in IE and Opera while the CSS code works only in IE.





       同样,重要的是要一并检测 readyState 的两个状态,并在调用了一次事件处理程序后就将其移除。
       。       
  本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×