解决window.onload延迟加载问题

最新推荐文章于 2023-03-30 14:04:12 发布

weixin_30432179

最新推荐文章于 2023-03-30 14:04:12 发布

阅读量600

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jing-tian/p/11072322.html

版权

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 来实现相同功能

最低0.47元/天解锁文章

weixin_30432179

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决window.onload延迟加载问题

window.onload方法，表示当页面所有的元素都加载完毕，并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容。这样肯定保证了代码在domReady之后执行。使用window.onload方法在文档外部资源不多的情况下不会有什么问题，但是当页面中有大量远程图片或要请求的远程资源时，我们需要让js在点击每张图片时，进行相应的操作，如果此时外部资源还没有加载完毕，点...
复制链接

扫一扫