通过 JS 判断页面是否加载完成

  • 2017-09-01
  • 24
  • 1

首先介绍下 HTML 文档加载顺序:

  1. 解析 HTML 结构;
  2. 加载外部脚本和样式表文件;
  3. 解析并执行脚本代码;
  4. 构造 HTML DOM 模型;(触发 DOMContentLoaded
  5. 加载图片等外部文件;
  6. 页面加载完毕;(触发 load)

onreadystatechange

原理是通过用 document.onreadystatechange 的方法来监听状态改变, 然后用 document.readyState == "complete" 判断是否加载完成。

JS 代码如下:

document.onreadystatechange = subSomething;
function subSomething(){ 
  if(document.readyState == "complete"){ //或者写成 document.readyState == 4
<strong>    alert(11);
  }
}

页面加载 readyState 的五种状态:

  • 0 (Uninitialized): the send( ) method has not yet been invoked.(未初始化)还没有调用 send() 方法
  • 1 (Loading): the send( ) method has been invoked, request in progress.(载入)已调用 send() 方法,正在发送请求
  • 2 (Loaded): the send( ) method has completed, entire response received.(载入完成)send() 方法执行完成,已经接收到全部响应内容
  • 3 (Interactive): the response is being parsed. 4: (Completed) the response has been parsed, is ready for harvesting.(交互)正在解析响应内容
  • 4 (Complete): the response has been parsed, is ready for harvesting.(完成)响应内容解析完成,可以在客户端调用了

兼容性:支持 readystatechange 事件的浏览器有 IE、Firfox 4+ 和 Opera(但我试过在 Chrome 下也是有效的)。

$(window).load()

需等到“网页 html 标签中引用的图片、文档、内嵌物件(如 flash)、iframe ”等杂七杂八的东西都载入后才会触发。

$(window).load(function(){ }) 等同于 原生的 javascript 中 window.onload = function (){ };但是也有一定的区别

$(window).load 可以定义多次,如:

$(window).load(function(){  
   a();
});  
$(window).load(function(){  
   b();  
});  

window.onload 不能定义多次,定义多次的话多执行最后定义的那次;若想执行多个函数,需要这样编写代码:

window.onload = function() { 
  a();
  b();
}  

一般来说,等网页全部元素都载入才执行程式时机有点晚,因为在此之前,使用者已经可以点选操作网页,跳脱我们程式的掌控范围。因此,我们几乎都是将程式放在$(document).read(function(){...}) 中(即 $(function(){...}))。而 $(window).load(fn) 适合执行一些要等待图档或元素全部载入才可进行的动作,例如:检查图档长宽。

只有当在某个元素完全加载完之前绑定 load 的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在 $(document).ready() 里绑定 load 事件,因为 jquery 会在所有 dom 加载完成后再绑定 load 事件。

$(document).ready()

JQuery 的 ready 事件实际上是对 IE 的 readystatechange 事件和 DOM 的 DOMContentLoaded 事件进行封装,这两事件都是在 DOM 树结构下载并解析完毕后触发。

当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。

当页面DOM对象加载完毕,web浏览器能够运行 JS 时,此方法即被触发。如果你想尽快执行 JS,可以使用此方法(在 html 的头部的 script 标签中的,不处于 ready() 中的 JS 代码将早于 ready() 执行)。

ready() 函数仅能用于当前文档,因此无需选择器;如果定义多个$().ready()函数则会按照顺序执行。

有下列三种等价的用法:
语法 1:

$(document).ready(function)

语法 2:

$().ready(function)

语法 3:

$(function)
注意:ready() 函数不应与 <body onload=” “> 一起使用。

注意:由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。

要解决这个问题,可以使用 Jquery 中另一个关于页面加载的方法 — load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象,则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发,如果处理函数绑定在元素(该元素要有 src 或者 href 等属性)上,则会在元素的内容加载完毕后触发。

注意:绑定 onload 事件的元素必须要有 src 或者 href 等属性,如:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>。

$(document).load();
当 web 页面以及其附带的资源文件,如 CSS,Scripts,图片等,加载完毕后执行此方法。常用于检测页面(及其附带资源)是否加载完毕(在 chrome 试过不起作用,待后面继续验证)。

$(document).unload();
此事件在停止浏览页面的时候触发,此操作可能存在于刷新操作/F5,单击上一页按钮,进入其他页面或关闭整个tab或窗口(在 chrome 试过不起作用,待后面继续验证)。

总而言之,他们的调用的先后顺序是:ready() >> load() >> unload()。

总结和扩展

  1. 在引用 jQuery 的情况下如果要在页面 DOM 对象加载完毕后即执行就用 $(document).ready();若要等到网页 html 标签中引用的图片、文档、内嵌物件(如 flash)、iframe 等都载入,即页面完全加载成功后才触发,就用 $(window).load()
  2. 若要用原生 JS,如果要在页面 DOM 对象加载完毕后即执行就用 DOMContentLoaded,IE 下用 readystatechange;若要等到网页 html 标签中引用的图片、文档、内嵌物件(如 flash)、iframe 等都载入,即页面完全加载成功后才触发,就用 window.onload,记住只能加载一次。
  3. 在所有元素加载之前执行:
    (function(){
       alert("DOM还没加载哦!");
    })(jQuery)
    

    或者写在 <head/> 里的 <script/> 标签里:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    var ...
    function(){
        ...
    }
    </script>
    </head>
    <body>
    </body>
    </html>
    

评论