window.onload方法,表示当页面所有的元素都加载完毕,并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容。这样肯定保证了代码在domReady之后执行。使用window.onload方法在文档外部资源不多的情况下不会有什么问题,但是当页面中有大量远程图片或要请求的远程资源时,我们需要让js在点击每张图片时,进行相应的操作,如果此时外部资源还没有加载完毕,点击图片是不会有任何反应的,大大降低了用户体验。那既然window.onload方法不可行,又该怎么做呢?
你肯定想到了jquery中的$(document).ready(function(){})方法了,其实jquery中的domReady应该和window.onload的实现原理是大同小异的。为了解决window.onload的短板,w3c 新增了一个 DOMContentLoaded 事件。
(1)onload实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ document.getElementById("header").style.color="red"; } </script> </head> <body> <h1 id="header">我是H1</h1> <img src="1.jpg" alt=""> <img src="1.jpg" alt=""> <img src="1.jpg" alt=""> <!-- 如果大量图片的时候onload需要等待全部加载完成才能将h1标签给渲染成红色 --> </body> </html>
(2)Jquery解决以上问题
$(document).ready()方法和window.onload有什么区别?
(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM包括图片载入就绪时就对其进行操纵,并调用执行绑定的函数。
tip:jquery就是调用了原生JS事件DOMContentLoaded 来实现相同功能