Windows onload事件不能与自定义javascript结构一起使用
Windows onload事件是指在网页加载完成后触发的事件，用于执行特定的JavaScript代码。然而，由于浏览器加载网页的过程是逐步进行的，如果在网页加载过程中使用了自定义的JavaScript结构，可能会导致onload事件无法正常触发。
自定义JavaScript结构通常是指在网页加载过程中使用了异步加载、动态生成或延迟执行的JavaScript代码。这些代码可能会改变网页的结构或内容，从而影响到onload事件的触发时机。
为了解决这个问题，可以考虑以下几种方法：
- 将自定义JavaScript结构放在onload事件之前执行：将自定义JavaScript代码放在网页头部或者在<body>标签之前执行，确保在onload事件触发之前已经完成相关的操作。
- 使用DOMContentLoaded事件代替onload事件：DOMContentLoaded事件在网页的DOM结构加载完成后触发，不需要等待所有资源（如图片、样式表）加载完成。可以将自定义JavaScript代码放在DOMContentLoaded事件的回调函数中执行，以确保在DOM加载完成后进行相关操作。
- 使用defer或async属性加载脚本：在引入自定义JavaScript脚本时，可以使用defer或async属性来延迟脚本的执行。defer属性表示脚本将在文档解析完成后执行，而async属性表示脚本将在下载完成后立即执行。这样可以避免自定义JavaScript结构影响到onload事件的触发。
总结起来，为了避免Windows onload事件与自定义JavaScript结构冲突，可以通过调整脚本的执行时机、使用DOMContentLoaded事件或者延迟加载脚本等方式来解决。具体的解决方案需要根据具体的网页结构和需求来确定。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云CDN加速：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
相关·内容
1回答
Window.onload与脚本的延迟
javascript、html
据说，html文档有4 readyState的可能值：
未初始化-尚未开始加载
加载-正在加载
交互式-已加载足够多的用户可以与其进行交互。
全满载
据说，基本上，在执行脚本块中的javascript之前，延迟会告诉浏览器等待“准备就绪”。通常这是在DOM完成加载和document.readyState == 4之后
因此，首先执行什么以及为什么- <script defer src="...">或window.onload=function(){...} ?？
浏览 4提问于2014-12-04得票数 14
回答已采纳
1回答
延迟js的有效方法
javascript、jquery
我打算调用一个js，它在加载页面时不会使用任何东西。因此，我只需要在加载整个页面时调用这个js，这样就不会延迟任何事情或为用户加载屏幕。
<html>
<body>
<script type="text/javascript" defer=defer src="function.js"></script>
<script type="text/javascript">
function downloadJSAtOnload() {
浏览 1提问于2020-07-07得票数 2
1回答
延迟脚本标记上的属性使我的脚本加载时间太长
javascript、jquery、html
由于我在<script src="/all.js" asynch defer></script>标记上使用了延迟和异步属性，所以HTML页面中的脚本由于jQuery (我在延迟中加载jQuery )而无法工作。因此，我必须使用natif中的window.onload方法。然后我就可以使用jQuery了。问题是，window.load使我的脚本在html中写得太长，无法加载，所以想象一下，当我必须在jQuery中附加元素时，需要几秒钟的时间来完成这个工作…
有解决办法吗？也许我不明白延迟异步的运行..。
提前谢谢你！
浏览 7提问于2014-09-30得票数 0
回答已采纳
3回答
加载内联jQuery脚本以及延迟和异步脚本
javascript、jquery、asynchronous、optimization、lazy-loading
我在一个网站上工作，并在其页面速度洞察，并有一个
Eliminate render-blocking JavaScript and CSS in above-the-fold content
基本上，我在页面顶部有两个外部javascript导入，这是：
<script src="/remotestaff_2015/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/remotestaff_2015/js/bootstrap.min.
浏览 0提问于2016-06-03得票数 4
1回答
为什么它显示延迟为异步，异步显示为延迟？把“多姆分析事件”说对了！但没有吗？
javascript、performance、dom-events、web-performance
我有一个加载程序，希望学习异步和延迟时间。它是一个动态插入的外部脚本标记--没有内联延迟。
一开始，我与理解异步为何表现为延迟(在DOMContentLoaded之后执行)进行了斗争。
使用2000个DOM元素，异步启动显示它可以在DOMContentLoaded之前执行。它是从本地硬盘装载的。通过从主机获取，在等待响应的同时执行脚本异步就更有意义了。这样就行了。
然后我改变了测试延迟和超价。现在，我要反驳为什么延迟在DOMContentLoaded之前作为异步执行的行为的笑话！
由于100000个DOM元素花费了30多个时间，所以脚本的执行仍然发生在DOMContentLoaded之前。怎么
浏览 3提问于2019-04-21得票数 0
1回答
如何异步加载jquery及其依赖关系脚本
jquery、asynchronous
我在异步加载jquery时遇到了问题。如我所见，如果加载javascript，它不依赖于其他库文件，但加载jquery脚本及其带有异步的库文件不起作用，并抛出一个错误，即$ is not defined
下面的脚本位于head标记中
<script async src="../js/jquery/jquery-1.10.1.min.js"> </script>
<script async src="../js/vendor/modernizr-2.8.2.min.js"></script>
<scrip
浏览 1提问于2014-06-23得票数 3
回答已采纳
1回答
在页面加载时运行外部javascript (该“驻留”为span)
javascript、html、jquery、wordpress、elementor
我已经找了一段时间了，但找不出我的具体情况。使用Wordpress/Elementor (尽管这可能并不重要)，我想在页面加载时运行下面的代码。所讨论的脚本应该启动一个嵌入式窗口，并需要userid参数。代码最初显示一个按钮，但在我的场景中，我删除了类标记，
<span class="glf-button" userid="xxxx-xxxx-xxxx" > Click here </span>
<script src="https://www.linktoscript.com/script.js" defer as
浏览 3提问于2021-04-01得票数 0
2回答
我应该把JavaScript的屏幕脚本放在HTML文档的哪里？
javascript
我刚刚用Javascript加载了屏幕，我想知道HTML文档的哪一部分必须放置。我是说在结束标签之前还是在里面？有些文件说必须把它放在上面，因为它必须在任何内容之前加载，但即使我以前说过，它似乎也很好用。
你能告诉我HTML文档的哪一部分我“必须”或“最好”放置脚本吗？是否与“延迟”或“不延迟”有分别？
window.addEventListener('load', function () {
document.querySelector('#js-loading').classList.add('hide');
});
.loadi
浏览 2提问于2019-04-14得票数 0
回答已采纳
1回答
在Google的API javascript示例中脚本异步/延迟/onload的使用
javascript、google-api
在谷歌为其API (例如)提供的各种javascript示例中，它们使用以下代码从html加载脚本：
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
浏览 2提问于2018-01-09得票数 2
回答已采纳
2回答
Analytics.js阻止其他脚本
javascript、jquery、html、asynchronous、google-analytics
我在我的网页上使用jquery malihu自定义滚动条。然后我嵌入了截取的谷歌分析代码。有时(可能10次中有4次) Analytics.js需要40秒才能加载。滚动条脚本是必不可少的，没有它网站看起来很丑陋，但这个滚动条脚本是在加载页面后执行的。但是页面在40秒后才会加载(因为analytics.js的原因)，所以40秒看起来很糟糕。analytics.js不是异步加载的吗？那么，为什么它会阻止页面正确加载呢？
它看起来是这样的：
<!DOCTYPE html>
<html lang="de">
<head>
<!--
浏览 0提问于2015-11-20得票数 0
1回答
页面100%完整加载后，在HTML中插入和加载脚本文件
javascript、html、performance、ads
这个问题不仅仅是创建和注入脚本文件的简单问题.
我想优化我的网站，加载脚本文件的谷歌广告。
问题：当google的脚本文件与HTML文件并行加载时，页面加载速度急剧下降。
解决方案，我想出了：我决定在网页100%完全加载(甚至100到200毫秒后100%加载后)加载google广告的脚本文件。
我尝试过的解决方案如下，提供了详细信息：
创建了一个函数来加载脚本文件并使用window.onload = loadGoogleSyndication()。但是它实际上在HTML文档完全加载之前加载脚本。(我可以在现场的速度测试中观察到)
函数loadGoogleSyndication() { cons
浏览 2提问于2021-08-09得票数 1
3回答
如何使用defer和内联脚本保持脚本执行顺序？
javascript、performance、page-load-time
有没有办法保留‘延迟’或内联混合的脚本的执行顺序？
例如。考虑以下场景：
<head>
<script src="/polyfills.js" />
<script>
// Small inline script that needs polyfills to work
</script>
<script src="/feature1.js" defer>
<script src="/feature2.js" defer>
</head>
浏览 3提问于2016-10-23得票数 4
1回答
ParticlesJS：“未定义的ReferenceError: particlesJS”
particles.js
我们让ParticlesJS工作@ ，在标题下面的第一部分覆盖完整的宽度/高度图像滑块。
然而，它停止了今天的工作，没有任何改变的网站。
控制台上写着：Uncaught ReferenceError: particlesJS is not defined
我们呼吁：
<script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" defer data-deferred="1"></script>
浏览 6提问于2019-12-17得票数 0
回答已采纳
4回答
如何使警报()；显示后，页面已完全加载？
javascript
我的背景：我是Javascript的新手。我以前使用过一些Jquery，但是我尝试学习纯香草Javascript而不使用库。
我的软件：，我使用的是最新的方括号文本编辑器和最新版本的。
问题:在页面完全加载和显示后，我正在尝试显示一个alert();。该警报总是在显示页面之前运行。只有在我关闭警报后，页面才会显示。
My Research: --我尝试过许多不同的解决方案，其中几乎没有一种是有效的；但是，当解决方案确实工作时，我的一些其他Javascript语句就停止工作了。我尝试了以下解决办法：
将我的脚本标记放在页面底部
在我的.js文件中创建卸载事件
window.onload
浏览 6提问于2017-06-22得票数 1
2回答
预加载器应在DOMContentLoaded或load事件内
javascript、html、css
我想添加一个预加载器到我的网站，直到网站是完全加载的图片，js，字体一切，但我不明白我应该使用哪一个
window.addEventListener('DOMContentLoaded', () => {
// code
});
或
window.addEventListener('load', () => {
// code
});
如果我使用了load或DOMContentLoaded，我应该停止对脚本文件使用defer吗？
另外，如果我有导入的模块，它应该在事件之外吗？例如：
import { gsap } from "gsap
浏览 0提问于2021-01-21得票数 0
1回答
外部文件中的JavaScript在脚本标记的onload事件之前执行
javascript、jquery、event-handling、loading、jquery-events
我已经读过，defer不一定会延迟加载外部脚本，但是它将直到解析完之后。
作为一个实验，我在包含jQuery的文件底部添加了一行，该文件在执行到JavaScript结束时发出一个事件：
window.dispatchEvent(new Event('jQuery-executed'));
我在测试页面中包含了带有jQuery属性的defer文件：
<script src="jquery-3.2.1.js" defer onload="console.log('jQuery loaded', Date.now());"
浏览 0提问于2017-07-27得票数 2
回答已采纳
1回答
在js文件上添加“延迟”后，下拉区域不工作
javascript、jquery、dropzone.js、deferred
所以我有一个控制区，一切都很好。
代码如下：
<head runat="server">
<title></title>
<script type="text/javascript" src="/content/js/jquery-1.11.2.min.js" ></script>
<link rel="stylesheet" href="/content/css/dropzone.css" />
浏览 0提问于2018-01-24得票数 1
1回答
延迟后执行异步脚本
javascript、jquery、asynchronous
理想情况下，我希望所有脚本都按HTML顺序异步加载。据我所知，async并不是那样工作的。
使用以下属性，general.min.js和funcs.min.js脚本不会运行，因为它们中有一些jQuery。
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js" async="async"></script>
<script type="text/javascript" src="scripts/general.min.j
浏览 4提问于2017-10-12得票数 3
回答已采纳
1回答
脚本是否会加载异步属性延迟onload事件？
javascript、html、dom
我在HEAD部分有一个带有script标签的页面：
<script src="somescript.js" type="text/javascript" async></script>
由于它包含async属性，所以它异步加载，浏览器在不等待下载此脚本的情况下解析页面。一旦下载，此脚本将执行，也是异步的，这样浏览器就可以继续解析页面。
该脚本一旦下载，将执行一些操作，并通过类似的内容动态插入另一个脚本：
var a = document.createElement('script');
a.type = '
浏览 2提问于2015-04-12得票数 8
6回答
您可以在HTML脚本标记上同时使用async和defer属性吗？
javascript、html、asynchronous
我想同时使用defer和async加载以下JavaScript代码
<script defer async src="/js/somescript.js"></script>
由于Internet Explorer 5.5+支持defer，正如您在上看到的那样，如果异步不可用，我想优雅地退回到使用defer。我认为异步在可用的时候使用更好，但是直到Internet Explorer10才支持它。
我的问题是，上面的代码是否有效？如果没有，是否可以使用JavaScript在async不可用时优雅地回退到在脚本上使用defer，从而造成这种情况？
浏览 1提问于2012-12-11得票数 89
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
