js init 加载顺序
在JavaScript中，init通常指的是初始化函数或初始化过程，用于在应用程序或页面加载时执行必要的设置和配置。init函数的加载顺序取决于它在代码中的位置以及浏览器的执行机制。以下是一些关于init加载顺序的基础概念和相关信息：
基础概念
- 脚本加载顺序：
- 内联脚本：在HTML元素中直接定义的脚本，按照它们在文档中的出现顺序执行。
- 外部脚本：通过
<script src="..."></script>引入的脚本，按照它们在文档中的出现顺序加载和执行。
- DOMContentLoaded事件：
- 当HTML文档被完全加载和解析完成后，
DOMContentLoaded事件会被触发，不需要等待样式表、图片和子框架的加载。
- 当HTML文档被完全加载和解析完成后，
- window.onload事件：
- 当整个页面及所有依赖资源如样式表和图片都已完成加载时，
window.onload事件会被触发。
- 当整个页面及所有依赖资源如样式表和图片都已完成加载时，
init函数的加载顺序
- 内联脚本中的
init：- 如果
init函数定义在内联脚本中，它会在脚本执行时立即运行。
- 如果
- 外部脚本中的
init：- 如果
init函数定义在外部脚本中，它会在脚本文件加载并执行时运行。
- 如果
- 事件监听器中的
init：- 如果
init函数被绑定到DOMContentLoaded或window.onload事件上，它会在相应的事件触发时运行。
- 如果
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Init Example</title>
<script>
// 内联脚本中的init
function initInline() {
console.log('Inline init function called');
}
window.onload = initInline;
</script>
<script src="external.js"></script>
</head>
<body>
<h1>Init Example</h1>
<script>
// 内联脚本中的init
function initBody() {
console.log('Body init function called');
}
document.addEventListener('DOMContentLoaded', initBody);
</script>
</body>
</html>external.js文件内容：
// 外部脚本中的init
function initExternal() {
console.log('External init function called');
}
window.onload = function() {
initExternal();
};加载顺序解释
- 内联脚本：
initInline函数绑定到window.onload事件，将在页面完全加载后执行。
- 外部脚本：
initExternal函数也绑定到window.onload事件，将在页面完全加载后执行。
- DOMContentLoaded事件：
initBody函数绑定到DOMContentLoaded事件，将在HTML文档完全加载和解析完成后立即执行。
输出顺序
initBody（DOMContentLoaded事件触发）initInline和initExternal（window.onload事件触发）
注意事项
- 如果多个
init函数绑定到同一个事件，它们会按照绑定的顺序依次执行。 - 如果
init函数中有异步操作（如AJAX请求），需要确保这些操作在适当的时机执行。
解决常见问题
init函数未执行：- 确保脚本文件正确加载，没有404错误。
- 确保
init函数在正确的事件上绑定，或者在正确的位置定义和调用。
init函数执行顺序问题：- 使用
DOMContentLoaded和window.onload事件来控制执行时机。 - 确保脚本按照正确的顺序加载和执行。
- 使用
通过理解这些基础概念和示例代码，你可以更好地控制和管理init函数的加载顺序，确保应用程序或页面在加载时正确初始化。
相关·内容
通过检查每个文件中是否存在"App“，它们可以按任何顺序加载(脚本标记是通过构建过程注入HTML的--因此很可能是按字母顺序添加的)。app.js: var view = new App.BaseView();
浏览 1提问于2015-03-19得票数 0
1回答
我按顺序加载了以下文件：<%= javascript_include_tag "application" %>
第二个引用的application.js.erb我检查了“网络”选项卡，以确保文件按顺序
浏览 3提问于2016-11-08得票数 0
Domsole = (function($) { output = $('#'+outname);{ output.scrollTop(9999999999); ask: ask, write: write})(jQuery);
$(document).
浏览 5提问于2016-11-29得票数 0
回答已采纳
我正在编辑local.xml文件以加载一些javascript，其中一个是carosule.js，我只希望它出现在我的索引页面上，这样我就可以使用<cms_index_index>节点，但它是由init.js我如何才能按照我想要的顺序加载它们？="addItem"> <name><e
浏览 5提问于2015-05-21得票数 0
我很好奇，如果我在已经加载到传统的<script>标记中之后，用Require加载其中一些脚本，会发生什么。这是我尝试过的：<script src="js/lib/jquery.js"></script>
<script src="js/lib/require.js" data-main="js/
浏览 0提问于2013-08-22得票数 1
我已经创建了一个小的脚本加载程序函数，它将迭代一个javascript对象，该对象中填充了目录中的文件名。这是用来动态加载胡子模板文件来创建页面的。我创建了javascript对象，以按我希望它们输出到页面的顺序列出模板，但有时当我加载页面时，元素的顺序并不正确。= { 2 : 'about' $.each(templates, function(key, value) {
$.getScript("
浏览 2提问于2014-02-05得票数 0
回答已采纳
如何将js文件和Google Client js api一起加载到一个Angular项目中，这是一件很棘手的事情。有个官方医生在谈论这件事，。文档中的一件事是它在init中使用了window.init()，这将导致无限循环。<script src="scripts/app.
浏览 2提问于2015-07-21得票数 1
1回答
我试图在一个Laravel应用程序上加载google map js API，但是我一直收到一个错误'initMap不是一个函数‘。app.blade.php
asset/js/ap/js
浏览 10提问于2018-07-29得票数 2
回答已采纳
然而，我在Chrome中得到了错误：
<script src="js/feedback.js"></script>
浏览 1提问于2013-10-16得票数 0
如果我知道在页面加载之前不会在HTML上调用任何代码，那么文件加载的顺序仍然重要吗？
模块代码位于即时函数中这一事实是否足以触发已经加载其他模块的要求？
浏览 1提问于2011-02-07得票数 7
回答已采纳
是bug报告还是StackOverflow问题...我不知道。我正在一个移动应用程序上使用jQueryMobile，它运行得很好，除了页面和对话框之间的转换(页面和对话框之间，反之亦然)。$.mobile.defaultDialogTransition =‘无’。编辑:在每个链接上显式设置数据转换属性确实适用于Android。
编辑2:以下是请求的代码
浏览 0提问于2012-03-29得票数 1
我想定制drupal 7中加载javascripts的顺序，我使用的是Bartik主题。如果我想添加一个新的JS并在这些列表之间的某个位置加载它。我怎样才能达到同样的目的？谢谢
浏览 7提问于2014-05-05得票数 1
回答已采纳
请让我知道以下文件在fiori应用程序和独立应用程序中的执行顺序( fiori启动板中没有配置)。1.index.html3.manifest.js5.主要观点。
谢谢!
浏览 1提问于2018-08-22得票数 1
回答已采纳
Drupal 7向重量添加了一个新的“drupal_add_js”选项，以便您可以控制将Javascript文件添加到页面的顺序。
浏览 0提问于2011-09-18得票数 8
回答已采纳
1回答
我正在设置我的app.js中的值(我总是在我的应用程序中这样做)，但由于某些原因，它一直更改回ERB <%=boo%>。有人能帮我弄清楚我的模板设置吗？\]\]/g当我在设置后立即在app.js文件中使用console.log(_.templateSettings)时，一切似乎都是正确的，但我的模板没有被处理。
浏览 5提问于2012-12-06得票数 3
回答已采纳
问题很简单，我在尝试加载设计模板正常工作所需的css文件和js文件列表时遇到了问题。我认为文件没有按正确的顺序加载，这会导致错误。加载样式表和javascript文件的正确方法是什么，以确保它们按正确的顺序加载？因
浏览 0提问于2016-06-21得票数 1
我试着用angularjs测试一个简单的控制器，但是文件不能加载到浏览器中。我的文件如下。files: [ 'js/test.js','js/app.js','js/angular.min.js']files: [ 'js/test_wrong_path.js
浏览 1提问于2014-12-31得票数 0
1回答
我使用的代码如下所示
<div id="fb-root"></div> {literal}<script src="http://connect.facebook.net/en_US/all.js#appId
浏览 1提问于2010-11-02得票数 0
我遇到了一个问题，我的AngularJS网页有时无法正确加载。当发生这种情况时，相应控制器中的代码不会运行。这种情况很少发生。我怀疑这可能是由于AngularJS文件的加载顺序造成的。下面是我的代码，显示了html页面的加载顺序； <script src="lib/angu
浏览 0提问于2014-11-13得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
