等待HTML DOM 的加载

最新推荐文章于 2022-12-27 10:09:39 发布

lipengyu2007

最新推荐文章于 2022-12-27 10:09:39 发布

阅读量241

点赞数

分类专栏： javascript 文章标签： HTML JavaScript 脚本 F# 浏览器 ViewUI

本文链接：https://blog.csdn.net/lipengyu2007/article/details/83708769

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

浏览器的渲染和操作顺序大致如下

HTML解析完毕

外部脚本和样式表加载完毕

脚本在文档内解析并执行

HTML DOM 完全构造起来

图片和外部内容加载

---------------------》导致有的脚本不能访问还不存在的DOM 《--------------------

解决：

1, 等整个页面加载完毕才执行DOM操作


addEvent(window, "load", function(){
  //执行HTML DOM操作
})

缺点：速度慢，如果页面有很多图片，视频等用户可能得等一段时间

2, 等待大部分DOM的加载


<html>
  <head>
    <script>
      function init(){
        执行HTML DOM操作
      }
    </script>
  </head>
  <body>
    <!-- HTML -->
    <script>init();</script>
  </body>

</html>

缺点：麻烦

3.最复杂


function domReady(f){
	if(domReady.done) 
		return f();

	if(domReady.timer){
		domReady.ready.push(f);
	}else{
		addEvent(window, "load", isDOMReady);

		domReady.ready = [f];

		// 尽可能快的检查DOM是否已可用
		domReady.timer = setInterval(isDOMReady, 13);
	}
}

function isDOMReady(){
	if(domReady.done) 
		return false;

	if(document && document.getElementsByTagName 
		&& document.getElementById && document.body){
		clearInterval(domReady.timer);
		domReady.timer = null;

		for(var i=0; i<domReady.ready.length; i++){
			domReady.ready[i]();
		}

		domReady.ready = null;
		domReady.done = true;
	}
}

lipengyu2007

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
等待HTML DOM 的加载

浏览器的渲染和操作顺序大致如下HTML解析完毕外部脚本和样式表加载完毕脚本在文档内解析并执行HTML DOM 完全构造起来图片和外部内容加载---------------------》导致有的脚本不能访问还不存在的DOM 《--------------------解决：1, 等整个页面加载完毕才执行DOM操作[code="jav...
复制链接

扫一扫