浏览器的渲染和操作顺序大致如下
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;
}
}
分享到：
相关推荐
"jQuery 实现的等待加载页面"就是一种为了优化用户交互而设计的技术方案。jQuery，一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果，使得创建这种功能变得更加简单。 首先，我们来看`jquery....
在DOM加载完成时运行的代码可以提高页面性能和用户体验。 标题中提到的方法是在DOM准备就绪时执行代码的一种常见方式，这里以jQuery库为例。jQuery提供了一个简洁的API来监听DOM的加载状态。`$(document).ready()`...
这个过程类似于浏览器加载HTML页面时的行为，但发生在服务器端，无需用户等待，提高了响应速度。 二、DOM操作 DOM（Document Object Model）是HTML和XML文档的编程接口，`htmldom`提供了丰富的DOM API，包括创建、...
在网页开发中，用户体验至关重要，尤其是...总的来说，"简单jQuery加载等待转圈页面插件"是提升网页加载体验的实用工具，它通过jQuery的便利性和强大的DOM操作能力，为开发者提供了快速集成和定制加载提示的解决方案。
在DOM加载完成后，我们可以通过监听这个事件来执行初始化页面等待效果的代码，如显示一个加载动画。 2. **window.onload事件**：与DOMContentLoaded不同，onload事件会在整个页面资源（包括图片、脚本等）都加载...
本文将介绍几种判断DOM加载完毕的技巧，以便开发人员能够在合适的时机执行JavaScript代码。 ### 理解浏览器的渲染和操作顺序 在了解如何判断DOM何时加载完毕之前，首先需要知道浏览器加载网页的一般顺序。通常，...
另一个重要的事件是`DOMContentLoaded`事件，它在DOM加载并解析完成后触发，不等待样式表、图片和子框架的加载完成。这个事件是判断DOM加载状态的理想选择之一。与此相对的是`onload`事件，该事件在页面上所有的内容...
3. **异步加载**：使用`window.onload`或`DOMContentLoaded`事件监听整个页面或DOM加载完成，此时可以安全地进行页面操作。 五、优化策略 1. **异步加载**：使用`async`或`defer`属性让JavaScript文件异步加载，...
- **DOMContentLoaded**事件：当文档的DOM结构加载完成，但不等待图片和样式表时触发。 - **事件委托**：利用事件冒泡原理，为父元素设置监听器，处理子元素的事件。 了解并熟练掌握这些知识点，开发者可以构建出...
为了解决这一问题，我们可以采用一些策略来确保脚本在DOM加载完毕后立即执行，而不是等待所有资源加载完毕。这里有两个著名的方法，分别来自jQuery的作者John Resig和JavaScript大师Dean Edwards。 首先，jQuery...
HTML页面在加载过程中，用户可能会面临长时间的等待，这无疑会降低用户体验。为了改善这种情况，开发者通常会采用动态加载效果来展示页面加载进度，让用户感知到网页正在积极加载，而不是停滞不前。本文将深入探讨...
这些动画为用户提供了一种视觉反馈，表明页面正在加载，提高了用户体验，避免了用户在等待过程中感到不耐烦或疑惑。以下是对这个主题的详细阐述： 1. **HTML与CSS基础**：HTML（超文本标记语言）是网页内容的基础...
在实现“页面加载等待效果”时，我们可以利用JavaScript的事件监听、计时器以及DOM操作等功能。 1. **事件监听**：在HTML页面加载过程中，我们可以监听`window.onload`或`document.DOMContentLoaded`事件。这两个...
对于JavaScript，我们要注意避免阻塞DOM解析，可以考虑使用异步加载或 defer 属性来提升页面加载速度。 最后，为了便于开发者参考和学习，项目可能提供了一个在线预览链接，如给出的"详细介绍参考 ...
`window.onload`在所有资源（包括图片）加载完成后触发，而`DOMContentLoaded`则在HTML结构解析完成时触发，不等待资源。 3. **图片预加载**：当页面中包含大量图片时，可以使用JavaScript预加载图片，避免用户在...
关于我的SWFObject V1.5的使用过程，以上篇中的介绍暂时告一段落了，下面我将会带领SWFObject V2.1出场与大家见面，如果我早一点结识V2.1的话，或许就不会受到“等待HTML DOM加载”问题的侵扰了。 首先，给大家简要...
1. 考虑到性能，避免在加载等待层下执行不必要的DOM操作。 2. 如果数据加载时间过长，可以提供取消或重试的选项。 3. 确保加载层具有合适的z-index，使其始终位于页面其他元素之上。 4. 对于触摸设备，考虑处理...
它可以监听页面加载事件，当页面的DOM（文档对象模型）基本构建完成后，JS可以开始执行自定义的加载动画。例如，常见的加载动画有旋转的loading图标、百分比进度条等。通过JavaScript，我们可以精确控制动画的执行...
为了避免这种情况，开发者通常会在JavaScript代码的开始处使用$(document).ready()、window.onload等函数，确保DOM文档加载完成后才执行JavaScript代码。这样做可以保证脚本运行时DOM已经完全就绪，避免了查找不到...