开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

脚本onload/onerror与IE(用于延迟加载)问题

脚本onload/onerror与IE(用于延迟加载)问题

脚本的onload和onerror事件在延迟加载脚本时在IE浏览器中可能会遇到一些问题。下面是对这个问题的完善且全面的答案：

概念：
- onload事件：当脚本加载完成并成功执行时触发的事件。
- onerror事件：当脚本加载失败时触发的事件。
分类：
- onload事件和onerror事件都属于脚本加载事件。
优势：
- onload事件可以用于在脚本加载完成后执行一些操作，如初始化页面、绑定事件等。
- onerror事件可以用于处理脚本加载失败的情况，如显示错误信息、加载备用脚本等。
应用场景：
- 延迟加载脚本：通过延迟加载脚本可以提高页面加载速度，特别是对于大型网站或包含大量脚本的页面。
- 异步加载脚本：通过异步加载脚本可以在页面加载过程中并行加载脚本，提高页面的并发性能。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云函数（Serverless）：https://cloud.tencent.com/product/scf
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

总结：脚本的onload和onerror事件在延迟加载脚本时在IE浏览器中可能会遇到问题，但可以通过合适的处理方式来解决。腾讯云提供了一系列相关产品，可以帮助开发者在云计算领域进行开发和部署。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

动态加载css方法实现和深入解析

= onload; node.onerror = function() { // 加载失败(404) onload(); } }else{ node.onreadystatechange...onload() { // 确保只跑一次下载操作 node.onload = node.onerror = node.onreadystatechange = null; // 清空node...5.1 onload方法 function onload() { // 确保只跑一次下载操作 node.onload = node.onerror = node.onreadystatechange...node = null;将node重置为null，是为了避免低版本的IE出现内存溢出问题，及时清除没用的dom节点。最后，执行callback方法。...5.2 支持onload方法浏览器的处理 if(supportOnload){ node.onload = onload; node.onerror = function() {

1.3K2 0

JS魔法堂：IMG元素加载行为详解

二、资源加载的相关属性和事件　　　　　　　　　　　　　　　　　　资源加载首先当然是确定资源位置的 src属性、随之就是资源加载成功与否的 onload事件和 onerror事件，对于IE5~...onload事件，当资源加载完成并成功解析后触发（若加载的不是image/*类型的资源，则解析失败）。 onerror事件，当找不到资源或解析失败后触发。...complete属性，用于表示IMG元素的资源是否成功解析。默认为false，，onload事件触发后变为true（onload事件处理函数运行时，readyState依然为false）。...和onerror事件，IE5~10下还订阅了onreadystatechange事件，统计整理其在IE5~11、Chrome和FF下的行为特点和事件响应延时。...四、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　这里仅仅对IMG元素加载http、javascript和data的URI Scheme等进行实验，加上实验手段等问题，难免导致统计数据不全面

2.8K6 0

JS魔法堂：LINK元素深入详解

渲染五、属性rel介绍六、动态创建LINK元素七、与资源加载相关的属性和事件八、资源加载实验 1. IE下的结论 2. Chrome下的结论 3....rel介绍　　　　　　　　　　　　　　　　　　　　　　　　属性rel用于规定当前文档与被加载的资源之间的关系。 ...　　　　　　　　　　　　　　　　资源加载首先当然是确定资源位置的 href属性，随之就是资源加载成功与否的 onload事件和 onerror事件，对于IE5~8还多了一个 onreadystatechange...事件和与之相关的 readyState属性 onload事件，当资源加载完成后触发（注意：即使资源类型与LINK元素的type属性值不符，只要资源加载完成就会触发onload事件）。...对于有效路径资源且资源类型与type属性值匹配的（如test.css），将加载并缓存起来，然后触发onload事件； 2.

3.3K10 0

跨站脚本（XSS）备忘录-2019版

（Chrome、Firefox、IE、Safari) 选框完成时触发（Firefox、IE) 加载元素时触发（Safari) 加载第一帧时触发（Chrome、Firefox、IE、Safari) "> --> 带有base64的脚本src中的数据协议 "> 用于IE的VBScript协议 XSS stealme IE9选择元素和纯文本用于消耗标记 XSS<option

6.3K1 0

JavaScript性能提升学习

JavaScript性能提升学习 1 提升js加载与执行性能多数浏览器使用单一进程处理UI和js脚本执行，部分浏览器允许并行下载js文件，但仍会阻塞其他资源下载，比如图片，页面仍必须等到所有js...代码下载执行完才能继续，内嵌脚本不要跟在后，将会导致页面阻塞等待样式表的下载减少标签的数量，包括内嵌和外链脚本，最小化执行延迟会明显改善页面性能，方式一：合并方式二：无阻塞下载js文件 3.1 defer延迟脚本，兼容性不佳...，代码仍会下载，但会等到DOM加载完，onload事件触发前执行 alert("defer"); alert("script...Function()，给setTimeout()、setInterval()传递函数作为参数而非字符串 8.2 使用Object/Array直接量 {}、[] 速度更快且代码简洁 8.3 避免重复工作使用延迟加载

1.3K2 0

在 HTML 中包含资源的新思路

与大多数自定义 JavaScript 方法不同，这个方法是 HTML 驱动的，它在标记中的目的非常清楚，一目了然。它适用于 HTML 或 SVG。...内容加载不会阻止页面渲染，这是 iframe 的性质。它是缓存友好的。与服务器端嵌入不同，此模式允许我们包含外部文件，同时允许自然缓存文件以供日后重用。...注意：你可能希望为 iframe 指定 border:0; 甚至可以在加载时安全地隐藏它（或许通过 onerror 事件再次显示它？）。...IE 会显示 iframe 中的备选内容，但我认为可以通过调整 onload 处理中的 JS 来获得对 IE 的支持，因为它目前用的是 IE 不喜欢的语法。稍微调整一下，我认为 IE 支持是可能的。...使用 iframe 进行此模式的另一个好处是， iframe 会在进入视口时获得延迟加载的能力。这可以用 load ="lazy" 属性来实现，该属性也适用于 img 元素。

3.1K3 0

JavaScript 页面资源加载方法onload，onerror总结

资源加载：onload，onerror 浏览器允许我们跟踪外部资源的加载 —— 脚本，iframe，图片等。...这里有两个事件： onload —— 成功加载， onerror —— 出现 error。加载脚本假设我们需要加载第三方脚本，并调用其中的函数。...我们需要等到该脚本加载完成，之后才能调用它。对于我们自己的脚本，可以使用 JavaScript module，但是它们并未被广泛应用于第三方库。...只知道是加载失败了。注意：onload/onerror 事件仅跟踪加载本身在脚本处理和执行期间可能发生的 error 超出了这些事件跟踪的范围。...也就是说：如果脚本成功加载，则即使脚本中有编程 error，也会触发 onload 事件。如果要跟踪脚本 error，可以使用 window.onerror 全局处理程序。

4.2K1 0

如何动态加载js？

5、加载js完毕之后，要可以执行回调函数。解决问题：如何解决这些问题呢？我想到的办法是——动态加载js。就是通过js代码的方式来加载。...既然没有问题那就用呗，虽然还不知道为啥要这么写代码。遇到新问题：但是没过多久就遇到了问题，在IE10里面，树、分页、表格等，都会多出来好几份？把IE10设置为兼容IE7的模式，就一切正常。...看了是IE10的新特性照成的。那么到底是怎么回事呢？断点跟踪吧。弄了好久才发现，原来是js文件会被加载多次。为什么被加载了多次呢？...原来 chrome只会触发 onload，而不会触发onreadystatechange（不会进入断点）。而IE7只会触发 onreadystatechange，而不会触发onload。...= s.onload = loaded; } else { s.onreadystatechange = ready; s.onerror

12.8K5 0

HTML 附件的钓鱼邮件出现激增

动态创建的 script 标签的 src 属性被设置为使用 atob() 函数进行 base64 编码的 URL，解码后的 URL 用于加载额外的 JavaScript 代码。...执行代码后，就可以看到如下所示的加载页面：【中间加载页面】中间加载页面是这种攻击的关键特征之一，攻击者试图通过这种方式增加延迟来逃避检测。...【变种代码】变种2：使用 onload 触发与 eval 该变种使用 onload 触发 eval 与 atob 函数执行网络钓鱼 Payload：【变种代码】上图中包含 base64 编码的数据...变种4：使用 onerror 触发与 eval 变种使用 onerror 触发 eval 与 atob 函数加载网络钓鱼 Payload：【变种代码】上图中，样本包含 base64 编码的字符串。...由于来源路径被设置为 x，img 标签的 onerror 属性在加载图像时出错，从而触发执行 onerror 属性中的代码。

1963 0

JS异步加载的三种方式

方法里面执行，这样就解决了阻塞onload事件触发的问题。...脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。...三：延迟加载有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。...将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。 JS的加载分为两个部分：下载和执行。...解决思路：为了解决JS延迟加载的问题，可以利用异步加载缓存起来，但不立即执行，需要的时候在执行。如何进行缓存呢？

3.2K2 0

源码解析-url状态检测神器ping-url

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。所以，为了实现任意url可以正常访问，第一个要解决的问题就是：跨域。...所以onerror事件可以用于监听发起请求，到接收到反馈error所花费的时间。这样，就可以直接算出网络访问的延时。但是，很遗憾，准确率并不是100%。因为有一种情况是：url本身就是死链。...这种情况下onerror也是会触发的。为什么需要onload事件？ onload事件的触发时机是资源已下载完成。只要触发这个事件，则证明url不是死链。...、onload 加入body中，发起请求事件触发后，计算延迟时间这里有个小细节，url后要加上随机数v=***。...参考 [1] 华佗诊断分析系统 [2] 详解script标签 [3] 不要再问我跨域的问题了 [4] :外部资源链接元素 [5] 跨源网络访问

1.9K4 0

webpack模块化原理-Code Splitting

in IE....script.onerror = script.onload = null; clearTimeout(timeout); var chunk = installedChunks...IE....script.onerror = script.onload = null; clearTimeout(timeout); var chunk = installedChunks...中构建一个script标签，append到head标签中，src指向加载的模块脚本资源，实现动态加载js脚本添加script标签onload、onerror 事件，如果超时或者模块加载失败，则会调用

9216 0

浏览器 IMG 图片原生懒加载 loading=lazy

语法规范 HTML loading 属性适用于 img 和 iframe，语法规范见 HTML Standard - Lazy loading attributes。...关键词状态描述 lazy 懒惰的用于延迟获取资源，直到满足某些条件。 eager 渴望的用于立即获取资源；默认状态。属性的缺失值默认值和无效值默认值都是 Eager状态。...;this.alt=this.dataset.alt;for(const a of ['data-title','data-alt','onerror','onload']){this.removeAttribute...for(const a of ['data-title','data-alt','onerror','onload']){this.removeAttribute(a);}" /> 为了达到 loading...Lazy loading加载数量与屏幕高度有关，高度越小加载数量越少，但并不是线性关系. Lazy loading加载数量与网速有关，网速越慢，加载数量越多，但并不是线性关系。

1.8K1 0

【Web性能】Javascript 代码性能优化条目（一）

浏览器在解析HTML页面的过程中每遇到一个script标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。...2 延迟脚本 HTML4中引入一个script标签扩展属性:defer。该属性指明元素所含的脚本不会修改DOM，代码能安全地延迟执行。同时，HTML5中引入async属性，用于异步加载脚本。...async与defer的相同点是采用并行下载，在下载过程中不会产生阻塞。区别在于执行时机，async是加载完成后自动执行，defer需要等待页面完成后执行。...当中的内容没有全部加载完成，IE可能会抛出一个“操作已终止”的错误信息。使用动态脚本加载文件，返回的代码通常会立即执行。但是，当代码只包含供页面其他脚本调用的接口时，就会出问题。...你可以通过监听该事件来获得脚本加载完成时的状态： let script = document.createElement("script"); script.onload = function() {

5162 0

在WebKit中并行加载外部脚本译：

尽管通过WebKit的预加载扫描器能够利用网页显示的空闲时间预先下载资源，在一定程度上改善了浏览器的阻塞状况，但是网络延迟依然会导致网页加载缓慢。...虽然围绕性能优化的问题已经有了很多不错的技术（参见：延迟加载，异步加载），但是他们都无法避免地引入了额外的代码，或是针对浏览器的Hacks写法。..." onload="myInit()"> 标记为 async 或者 defer 的脚本都会立刻开始下载，不阻塞浏览器的其它解析工作，而且它们都支持可选的 onload 事件，这样就能在脚本加载完成时开始执行依赖于该脚本的代码...这里有个例子，在这个例子中一个外部脚本下载需要1秒钟，紧跟在这个外部脚本后面是一段执行需要1秒钟的内嵌脚本。我们可以看到这个页面加载话费了2秒钟时间。...IE浏览器也很早就支持 defer 属性，IE9 增加了对 onload 属性的支持，但是 async 属性依然还不支持。

1.8K7 0

WEB开发面面谈之（5）——写JS时必须注意的的一些问题

问题:存在兼容性问题，IE6、7无效写法2: iframe.onload = iframe.onreadystatechange = function(){...}...问题:逻辑复杂，事件绑定逻辑混乱，在某些浏览器上onload和onreadystatechange都会触发，需要另外加标记位判断，逻辑复杂。.....}); 如何操作iframe内部的window 写法1: iframe.contentWindow 问题: 部分浏览器不兼容（IE67），获取失败写法2: document.frames[frameId...: 非W3C标准，后面很可能废弃，部分浏览器不一定支持写法2: iframe.style.boder = 'none'; 问题: 完全依赖CSS控制，但存在兼容性问题，IE继续头疼最终解决方案:...如defer/async属性使用script.onerror来监听脚本执行失败的情况（语法错误，初始化运行时错误等都会触发）监听script的完成事件比较复杂。

1.7K6 0

使用 JS 检测网址能否正常加载

onerror 事件触发不能加载的事件，onload 事件触发可以加载的事件，并使用 setTimeout 设置超时时间。...// 新建一个图片 var img = new Image(); // 设置图片的链接 img.src = "https://google.com/favicon.ico"; // 设定超时事件，延迟...3000 毫秒 var timeout = setTimeout(function () { // 清除 onerror 和 onload 事件 img.onerror = img.onload...onerror 事件触发不能加载的事件，onload 事件触发可以加载的事件，并使用 setTimeout 设置超时时间。...3000 毫秒 var timeout = setTimeout(function () { // 清除 onerror 和 onload 事件 iframe.onerror = iframe.onload

2.5K3 0

XSS相关Payload及Bypass的备忘录（上）

进入正题跨站脚本攻击（XSS）是一种计算机安全漏洞，通常出现在Web应用程序中。...这类漏洞能够使得攻击者嵌入恶意脚本代码到正常用户会访问到的页面中，当正常用户访问该页面时，则可导致嵌入的恶意脚本代码的执行，从而达到恶意攻击用户的目的。...PHN2Zy9vbmxvYWQ9YWxlcnQoMik+ 使用VBscript的XSS（只能用于...js=alert(document.domain); IE8: http://0me.me/demo/xss/xssproject.swf?...>\x3csVg/\x3e 来自：Ashar Javed ">></marquee

4.4K4 0

GA源代码里的小技巧之Beacon请求

GA源代码里的小技巧之Beacon请求作者前段时间在做类似Google Analytics（以下简称GA）的第三方监控脚本。...智能Beacon GA监控脚本一般都放在开发者的网页上。域名往往和Google不一样，这样发送请求到Google服务器的时候会涉及到跨域。...= img.onerror = img.onabort = function () { img.onload = img.onerror = img.onabort = null;...为了解决这个问题可以使用XMLHttpRequest（简称XHR）来发送跨域POST请求。当然这需要浏览器的跨域支持。发送POST请求时，参数都放在请求的payload中，不会受到URL长度所限制。...需要延迟关闭才能用于unload发送 sendBeacon 1. unload时更能确保成功2. 支持发送更多数据 1. POST请求消耗多2.

1.3K1 0

使用 TamperMonkey 增强生产力

currently running at localhost to access the localhost 1.2.3.4 to connect to an IP address @require 加载脚本的依赖...@grant @grant 用于给脚本添加一下GM_* 函数， unsafeWindow 对象权限。...GM 函数列表函数名功能 GM_addStyle(css) 加载 css GM_setValue(name, value) 保存一个值 GM_getValue(name, defaultValue)...GM_xmlhttpRequest(details) 参数 method one of GET, HEAD, POST url the destination URL headers ie. user-agent...GET", url: "https://example.com", timeout: 5000, ontimeout: () => reject(' timeout'), onload

9971 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭