今天在看脚本加载的顺序，想探讨一下window.load和document.body.load和$(function(){})的执行顺序。我也没太研究明白，希望大神帮我一下，指明我前进的方向。我先谢了,我这想探讨的是为什么会出现这种情况，而不是说用哪种方式去实现加载，或者说规避这种情况。
浏览器使用Firefox32.0.3，Chrome39.0.2160.2,内核是31.0.1650.63版本的是360浏览器。我在stackoverflow上也查了一下，没有获得比较满意的答案。
jquery的$(function(){})首先加载是没有任何疑问的，$(function(){})的执行是在DOM准备好之后执行。
window.onload是在页面加载完成之后，包括加载完各种js、css、image资源才执行。
document.body.load或者直接在body标签上加onload()方法，是在页面加载到body的时候执行的。
也有可能我理解不正确，请批评指正。
在这三款浏览器中发现有些不同的现象。
代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test2</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
window.onload=function(){
console.log("window onload");
}
function init(){
console.log("body init");
}
$(function(){
console.log("dom ready="+$('#span').html());
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>
</html>
测试结果：
| Firefox |
Chrome31.0.1650.63
|
Chrome39.0.2160.2
|
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
|
body init
|
body init
|
window onload
|
|
|
|
body init
|
代码2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test21</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function init(){
console.log("body init");
}
$(function(){
console.log("dom ready="+$('#span').html());
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
<script>window.onload=function(){
console.log("window onload");
}</script>
</body>
</html>
测试结果：|
Firefox
|
Chrome31.0.1650.63 | Chrome39.0.2160.2 |
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
|
window onload
|
window onload
|
window onload
|
代码3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test3</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*window.onload=function(){
console.log("window onload");
}*/
$(window).load(function(){
console.log("window onload!");
})
function init(){
console.log("body init");
}
$(function(){
console.log("dom ready="+$('#span').html());
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>
</html>
测试结果：|
Firefox
|
Chrome31.0.1650.63
|
Chrome39.0.2160.2 |
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
| window onload! |
window onload!
|
window onload!
|
|
body init
|
body init
|
body init
|
代码4：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test4</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*window.onload=function(){
console.log("window onload");
}*/
function init(){
//setTimeout(function(){
console.log("body init");
// },1000);
}
$(function(){
console.log("dom ready="+$('#span').html());
$(window).load(function(){
console.log("window onload!");
})
/*window.onload=function(){
console.log("window onload");
}*/
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>
</html>
测试结果：|
Firefox
|
Chrome31.0.1650.63
|
Chrome39.0.2160.2 |
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
| body init |
body init
|
body init |
|
window onload!
|
window onload!
|
window onload! |
代码5：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test5</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*window.onload=function(){
console.log("window onload");
}*/
function init(){
//setTimeout(function(){
console.log("body init");
// },1000);
}
$(function(){
console.log("dom ready="+$('#span').html());
/*$(window).load(function(){
console.log("window onload!");
})*/
window.onload=function(){
console.log("window onload");
}
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>
</html>
测试结果：|
Firefox
|
Chrome31.0.1650.63 | Chrome39.0.2160.2 |
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
| window onload |
window onload
|
window onload |
代码6：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test5</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*window.onload=function(){
console.log("window onload");
}*/
function init(){
//setTimeout(function(){
console.log("body init");
// },1000);
}
$(function(){
console.log("dom ready="+$('#span').html());
$(window).load(function(){
console.log("jquery window onload!");
})
window.onload=function(){
console.log("window onload");
}
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>
</html>
测试结果：
|
Firefox
|
Chrome31.0.1650.63 | Chrome39.0.2160.2 |
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
| window onload |
jquery window onload!
|
jquery window onload! |
|
jquery window onload!
|
window onload
|
window onload
|
代码7：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test7</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*window.onload=function(){
console.log("window onload");
}*/
function init(){
//setTimeout(function(){
console.log("body init");
// },1000);
}
$(function(){
console.log("dom ready="+$('#span').html());
window.onload=function(){
console.log("window onload");
}
$(window).load(function(){
console.log("jquery window onload!");
})
})
</script>
</head>
<body onload="init()">
<span id="span">I love Internet!</span>
</body>
</html>
测试结果：|
Firefox
|
Chrome31.0.1650.63 | Chrome39.0.2160.2 |
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
| window onload |
window onload
|
window onload |
|
jquery window onload!
|
jquery window onload!
|
jquery window onload! |
相关推荐
本篇文章将详细讲解如何利用three.js加载汽车模型，以及相关的JavaScript插件和素材文件。 首先，了解Three.js的基本概念。Three.js是基于WebGL的3D库，它在浏览器环境中构建3D模型，利用HTML5 canvas元素和WebGL ...
`jQuery(document).ready()`函数是jQuery中的一个重要概念，它确保了在执行任何JavaScript代码之前，DOM已经完全加载和解析完成。这个特性使得开发者可以在不担心元素未定义的情况下操作DOM。以下是几种常见的表示...
Three.js是一个基于WebGL的JavaScript库，它允许开发者在浏览器中创建和展示3D内容。本知识点将详细介绍如何在Three.js中导入FBX文件，并通过提供的源码实例进行深入解析。 首先，我们需要一个能够解析FBX文件的库...
在Web开发领域，Three.js是一个非常流行的JavaScript库，它用于创建和展示3D图形，而无需复杂的编程。Three.js利用WebGL技术，这是一种基于OpenGL标准的JavaScript API，可以在浏览器上实现硬件加速的3D渲染。本篇...
JavaScript（简称JS）是一种广泛用于网页和网络应用的脚本语言，主要负责处理客户端的交互逻辑。在网页开发中，事件扮演着至关重要的角色，它们允许用户与页面进行互动，如点击按钮、提交表单等。本文将详细介绍...
在本文中，我们将深入探讨如何在Vue.js应用中利用Three.js库来加载和展示glTF（GL Transmission Format）3D模型。glTF是一种开放标准格式，用于高效地传输和加载三维场景和模型，广泛应用于游戏开发、虚拟现实和增强...
本教程将深入探讨如何使用 Three.js 加载 obj 和 mtl 文件，以及如何为 obj 模型添加纹理。 首先，我们要了解 obj 和 mtl 文件的用途。OBJ 是一个通用的3D模型格式，它包含了模型的几何信息，如顶点、面和纹理坐标...
标题中的“ThreeJS加载3D模型”涉及到的是WebGL库Three.js的核心功能，Three.js是一个JavaScript库，用于在Web浏览器中创建和展示3D图形。它使得开发者无需深入理解底层的WebGL API，就能轻松地处理3D场景、对象、...
本文将深入探讨如何使用Three.js加载OBJ模型，这是一种广泛使用的3D模型格式，常用于共享和导入3D物体到各种应用程序。 首先，我们需要了解OBJ文件格式。OBJ是Wavefront公司开发的一种文本格式，它存储3D几何数据、...
3. **手动解析**：通过`$.parser.parse(window.document)`手动触发EasyUI对DOM元素的解析。 4. **关闭加载提示**：使用`setTimeout`延迟关闭进度条，确保页面元素已经被完全渲染。 5. **检查父窗口**：如果当前页面...
在本文中，我们将深入探讨如何使用three.js库加载OBJ模型并为其...总的来说，使用three.js处理3D模型是一个涉及多方面技术的过程，包括模型加载、交互事件处理和3D渲染。不断学习和实践将帮助你更好地掌握这些技能。
JavaScript 经典实例，涵盖了跨扫描器添加大事件、跨扫描器移除大事件、跨扫描器阻止默认行为、跨扫描器获取目标对象、跨扫描器获取滚动条位置、跨扫描器获取可视窗口大小、JS 对象冒充、JS 异步加载和同步加载等多...
`$(document).ready()`适用于大部分情况下的初始化操作，而`$(window).load()`和`$(window).on('load', function() {})`则更适合需要等待页面所有资源加载完成后再执行特定任务的场景。掌握这些方法能够帮助我们更好...
在本项目中，我们主要关注的是使用Three.js库来加载OBJ模型文件，并对场景中的相机和光照进行调整。Three.js是一个流行的JavaScript库，用于在Web浏览器中创建和展示3D图形。OBJ是一种广泛使用的3D模型文件格式，...
【标题】"threedemo.zip" 是一个包含使用Three.js库加载和展示3D模型的示例项目。Three.js是一个基于WebGL的JavaScript库，它允许开发者在浏览器中创建和展示三维图形。WebGL是一种在任何兼容的浏览器中运行的低级...
本篇文章将详细探讨如何使用THREE.js加载和显示OBJ格式的3D模型。 一、OBJ文件格式 OBJ是3D建模软件广泛使用的通用文件格式，它存储顶点、纹理坐标、法线和多边形等几何数据。这种格式是文本文件，易于读取和理解，...
在前端开发领域，Three.js 是一个非常流行的 JavaScript 库，用于创建和展示3D图形。在本主题中，我们将深入探讨如何使用 Three.js 的 CSS3DRenderer 来渲染全景图，这是一种将3D对象与CSS3变换相结合的技术，能够...
在本文中，我们将深入探讨如何使用Three.js库创建波纹扩散和光圈扩散效果，尤其适用于智慧城市或建筑等三维物体的视觉表现。Three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建复杂的3D图形变得相对简单...
在 jQuery 中，ready() 函数是用来执行代码的一个核心函数，它确保了在 DOM（文档对象模型）完全加载和解析完成后执行代码。为了理解 ready() 函数，我们需要与 window 的 load 事件进行比较，了解它们在页面加载...
在Three.js中，要实现3D模型的加载和环绕观看，我们需要经过以下几个步骤： 1. **设置场景(Scene)**：在Three.js中，所有3D对象都在一个场景中。首先，我们需要创建一个Scene实例，作为所有3D对象的容器。 ```...