Javascript判断页面是否加载完成 推荐
2012-11-01 10:01
323 查看
很多时候我们在使用document.getElementById的时候直接在script标签中获取对象,然后使用,此时程序会出现该对象为undefined。
但是如果你把这段代码放到文档的最末尾,你再运行他的结果便不是undefined。这到底是为什么呢?这个我们要从文档的加载来说起,一个html文档的加载都是按照一定顺序来加载的,当加载到head部分的js时,他会block(阻塞)下面内容的加载,这个时候我们js中去获取的对象都还没有,自然就为undefined。但是如果你将这个代码放到最后,页面按照顺序加载,当所有的html都加载完成,再去加载你的js,此时,页面中的对象已存在,自然不会为undefined。
上面的代码是立即执行,所以必须要考虑他所放的位置,但是如果是一个function,那么在代码加载的时候不会执行,只有在需要调用它的地方才会去触发,而在调用的地方已经将页面内容加载完成,所以function里面去使用上面的代码也不会出现undefined。
在jQuery中,我们使用$(document).ready(function(){}),在这个function里面他的方法为什么会等到页面加载完成之后再执行呢,其实我们可以仔细的去看一下他的ready方法。为了能更加清楚的描述出这种方法,我们下面用一个模拟例子来说明:
在这里,ready函数传递了另外一个函数,这个f是我们在页面加载完成之后需要去调用的方法。因此在ready函数中,我们要去判断页面是否加载完成,再去执行我们ready中的方法。
又是因为浏览器的原因,IE又要搞特殊!Mozilla添加了DOMContentLoaded事件,因此我们只需用给document添加该事件,同时将要执行的函数传递过去即可。而IE,我么要去判断他的onreadystatechange状态,当他加载完成时为complete或者为loaded的时候,此时我们才可以去调用他的方法。
<script> var dom = document.getElementById("target"); alert(dom); // undefined </script>
但是如果你把这段代码放到文档的最末尾,你再运行他的结果便不是undefined。这到底是为什么呢?这个我们要从文档的加载来说起,一个html文档的加载都是按照一定顺序来加载的,当加载到head部分的js时,他会block(阻塞)下面内容的加载,这个时候我们js中去获取的对象都还没有,自然就为undefined。但是如果你将这个代码放到最后,页面按照顺序加载,当所有的html都加载完成,再去加载你的js,此时,页面中的对象已存在,自然不会为undefined。
上面的代码是立即执行,所以必须要考虑他所放的位置,但是如果是一个function,那么在代码加载的时候不会执行,只有在需要调用它的地方才会去触发,而在调用的地方已经将页面内容加载完成,所以function里面去使用上面的代码也不会出现undefined。
在jQuery中,我们使用$(document).ready(function(){}),在这个function里面他的方法为什么会等到页面加载完成之后再执行呢,其实我们可以仔细的去看一下他的ready方法。为了能更加清楚的描述出这种方法,我们下面用一个模拟例子来说明:
jQuery.ready = function(f){ // 判断浏览器 var browser = window.navigator.userAgent; var isIE = false; if(/msie/.test(browser.toLowerCase())){ isIE = true; } // IE if(isIE){ document.onreadystatechange = function(){ if(document.readyState == "complete" || document.readyState == "loaded"){ f.call(); } }; }else{ // 非IE if(document.addEventListener){ document.addEventListener("DOMContentLoaded", f, false); } } }
在这里,ready函数传递了另外一个函数,这个f是我们在页面加载完成之后需要去调用的方法。因此在ready函数中,我们要去判断页面是否加载完成,再去执行我们ready中的方法。
又是因为浏览器的原因,IE又要搞特殊!Mozilla添加了DOMContentLoaded事件,因此我们只需用给document添加该事件,同时将要执行的函数传递过去即可。而IE,我么要去判断他的onreadystatechange状态,当他加载完成时为complete或者为loaded的时候,此时我们才可以去调用他的方法。
相关文章推荐
- javascript判断图片是否加载完成的方法推荐
- javascript js 判断页面是否加载完成
- javascript js 判断页面是否加载完成
- Javascript判断页面是否加载完成
- JavaScript判断页面是否加载完成
- 用js判断页面是否加载完成
- 用js判断页面是否加载完成实现代码
- 用 document.readyState == "complete" 判断页面是否加载完成
- Javascript 判断Flash是否加载完成
- 如何判断页面是否加载完成
- [转]用 document.readyState == "complete" 判断页面是否加载完成。
- 判断页面是否加载完成
- JavaScript判断页面是否已经加载完毕
- [javascript] 判断 iframe 是否加载完成
- 用 document.readyState == "complete" 判断页面是否加载完成
- 判断页面是否加载完成加载,并在加载完成后取到页面上的某个标签的数据
- [转]用 document.readyState == "complete" 判断页面是否加载完成。
- Delphi中WebBrowser判断页面及JS是否加载完成
- JavaScript怎么判断图片是否加载完成以便获取其尺寸
- JavaScript判断远程图片是否存在,加载完成:onerror 属性- & jQuery实现(如果因为网络或图片的原因发生异常,则显示该图片)~