开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让Chrome在没有jQuery的情况下在脚本标记上触发load/onload事件

要让Chrome在没有jQuery的情况下在脚本标记上触发load/onload事件，可以使用原生JavaScript来实现。以下是一种可能的解决方案：

<!DOCTYPE html>
<html>
<head>
  <title>Load Event Example</title>
</head>
<body>
  <script>
    function loadScript(url, callback) {
      var script = document.createElement("script");
      script.type = "text/javascript";

      if (script.readyState) {  // IE
        script.onreadystatechange = function() {
          if (script.readyState === "loaded" || script.readyState === "complete") {
            script.onreadystatechange = null;
            callback();
          }
        };
      } else {  // Others
        script.onload = function() {
          callback();
        };
      }

      script.src = url;
      document.getElementsByTagName("head")[0].appendChild(script);
    }

    loadScript("path/to/your/script.js", function() {
      // Script loaded and executed successfully
      // Perform any additional actions here
    });
  </script>
</body>
</html>

上述代码中，我们定义了一个loadScript函数，该函数接受两个参数：url表示要加载的脚本文件的URL地址，callback表示脚本加载完成后要执行的回调函数。

在函数内部，我们创建一个新的script元素，并根据浏览器的不同设置相应的事件处理程序。对于IE浏览器，我们使用onreadystatechange事件来监听脚本的状态变化，当状态变为"loaded"或"complete"时，表示脚本加载完成，执行回调函数。对于其他浏览器，我们使用onload事件来监听脚本的加载完成。

最后，我们将script元素添加到文档头部中，并指定要加载的脚本文件的URL地址。这样，在脚本加载完成后，就会触发相应的事件处理程序，从而执行回调函数。

这种方法可以在没有使用jQuery的情况下实现脚本的异步加载，并在加载完成后执行相应的操作。它适用于在脚本加载完成后执行特定的逻辑或操作，例如初始化某个库或插件、调用API等。

推荐腾讯云相关产品：腾讯云对象存储（COS），用于存储和管理大规模的非结构化数据，如图片、音频、视频等。您可以通过以下链接了解更多信息：腾讯云对象存储（COS）

请注意，这仅是一个示例答案，可能还有其他方法可以实现相同的效果。

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

有帮助

没帮助

相关·内容

window的onload事件和domcontentloaded执行顺序

上述三个图分别为chrome edge和Firefox，我们发现他们的结果都是一样的，先执行documentloded事件，然后再执行window.onload事件。...当window.onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。...相反，DOMContentLoaded事件触发后添加的事件侦听器永远不会执行。浏览器还在对象load上提供事件window。当此事件触发时，表示页面上的所有资源都已加载，包括图像。...可以在jQuery中使用查看此事件$( window ).on( "load", handler )。如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放在load事件的处理程序中。...尽管由 .ready() 添加的处理程序总是在动态加载的脚本中执行，但是窗口的加载事件已经发生，并且这些侦听器永远不会运行。

3.6K1 0

JS异步加载的三种方式

事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。...，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。...脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。...三：延迟加载有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。...JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？

3.1K2 0

前端知识普及之页面加载

里面需要进行一点解释即DOMContentLoaded事件是在domContentLoaded那段触发的。...相关事件 domComplete: 1441112693214, // load 事件发送给文档，也即 load 回调函数开始执行的时间 // 注意如果没有绑定...//计算load触发时间 var loadTime = t.domComplete - t.domLoading; 更直观的，我们可以在Chrome的developer工具的network选项里面得到我们想要的答案...这两个线，分别代表的是DOMContentLoaded和onload触发的时间。这也更能直观的看出，DOMContentLoaded事件比onload事件先触发吧。现在回到我们开头的那个问题。...这个时候模拟触发DOMContentLoaded事件，其实和onload事件触发时间并没有太久的时间距离。这种方式兼容低版本IE还是不太可靠的。

1.6K9 0

使用原生 JavaScript 在页面加载完成后处理多个函数

网页中的 JavaScript 脚本运行是需要通过事件去触发的。一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能。...因为下面的 HTML 元素还没有加载出来，head 中的处理这部分 HTML 元素的脚本已经被执行了。...使用监听器让脚本与 HTML 元素分离监听器实际上的功能就是行为与内容分离的。...以前需要在 HTML 中加上一些触发事件来触发 JavaScript 的相关函数，而现在直接在 JavaScript 中对某个元素的使用监听器，监听这个元素的事件，如果这个元素被触发了某些事件，在监听器中又定义了这个事件对应的处理函数...window.onload 事件 onload 事件只有在整个页面已经完全载入的时候才会被触发，我们将 JavaScript 代码写进 onload 事件中，就可以保证在 HTML 元素被加载完成之后，

2.7K2 0

【前端】：async、defer、onload、DOMContentLoaded

DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。...注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。兼容性： ?...行为模拟：在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll...总结： CSS 会阻碍 DOMContentLoaded； CSS 会阻塞 JS 执行； 2.2. onload The load event is fired when the whole page...2.3. jQuery.ready(fn) 源码摘录 API： // jQuery offers several ways to attach a function // that will run

1.9K2 0

探究网页资源究竟是如何阻塞浏览器加载的

阅读完这篇文章你将解开如下谜团：如何用 Chrome 定制网络加载速度？图片/视频/字体会阻塞页面加载嘛？ CSS 是如何阻塞页面加载的？ JS 又是如何阻塞页面加载的？...DOM 的加载，更加不会阻塞页面渲染；当图片加载完成的时候，会打印 onload，说明图片延迟了 onload 事件的触发。...上面这是解析时遇到一个正常的外链的情况，正常外链的下载和执行都会阻塞页面解析；而如果外链是通过 defer 或者 async 加载的时候又会是如何呢？ ?.../2.1.4/jquery.min.js') 我是 h1 标签动态插入的脚本在加载完成后会立即执行，这和 async 一致，所以如果需要保证多个插入的动态脚本的执行顺序...DOMContentLoaded 和 onload 在浏览器中加载资源涉及到 2 个事件，分别是 DOMContentLoaded 和 onload，那么它们之间有什么区别呢？

2.1K3 0

$(document).on和$(#idname).on和$(function(){ })区别

引言　　在写前端的时候经常用到js或jquery语法，有时候傻傻分不清，现在将学习过程中遇到的总结一下。　　...(function(){})在window.onload执行前执行的，(function(){})类似于原生 js 中的DOMContentLoaded事件，在 DOM 加载完毕后，页面全部内容（如图片等...DOM 文档加载步骤：解析 HTML 结构加载外部的脚本和样式文件解析并执行脚本代码执行 $(function(){}) 内对应代码加载图片等二进制资源页面加载完毕，执行 window.onload...和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。...2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。　　3.

2.1K2 0

10 种跨域解决方案（附终极方案）

1.同源策略跨域问题其实就是浏览器的同源策略所导致的。 ❝「同源策略」是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。...情况四: 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问...cookie 问题想要传递 cookie 需要满足 3 个条件 1.web 请求设置withCredentials 这里默认情况下在跨域请求，浏览器是不带 cookie 的。...，在 chrome 中是能看到返回值的，但是只要不满足以上其一，浏览器会报错，获取不到返回值。...> let first = true; // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name function load() { if (first

3K3 0

10 种跨域解决方案（附终极方案）

1.同源策略跨域问题其实就是浏览器的同源策略所导致的。同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。...情况四: 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问...cookie 问题想要传递 cookie 需要满足 3 个条件 1.web 请求设置withCredentials 这里默认情况下在跨域请求，浏览器是不带 cookie 的。...，在 chrome 中是能看到返回值的，但是只要不满足以上其一，浏览器会报错，获取不到返回值。...> let first = true; // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name function load() { if (first

2.7K1 2

Web 性能优化-首屏和白屏时间

我们只需要监听首屏内所有的图片的 onload 事件，获取图片 onload 时间最大值，并用这个最大值减去 navigationStart 即可获得近似的首屏时间。 <!...(1) Performance.timing 在 chrome 中查看 performance.timing 对象：与浏览器对应的状态如下图：左边红线代表的是网络传输层面的过程，右边红线代表了服务器传输回字节后浏览器的各种事件状态...loadEventStart: load 事件发送给文档，也即 load 回调函数开始执行的时间。 loadEventEnd: load 事件的回调函数执行完毕的时间。...jQuery 中经常使用的 $(document).ready() 其实监听的就是 DOMContentLoaded 事件。 (2) load 是指页面上所有的资源（图片，音频，视频等）加载完成。...jQuery 中 $(document).load() 监听的是 load 事件。

2.6K2 1

异步加载脚本保持执行顺序

2.Window onload：通过监听window的onload事件来触发行内代码的执行。只要确保外部脚本在window。Onload之前下载执行就可以保持执行顺序。运行结果： ?...：1.必须确保异步脚本是通过阻塞onload事件的方式加载的。 ...4.Script onload：前面提到的整合技术会增加页面的脆弱性、延迟和开销，通过监听脚本的onload事件可以解决这些问题。运行结果： ? ?...缺点：需要修改外部脚本，对第三方库不适用。多个脚本按序执行：正常引入脚本：运行结果： ? ? 采用XHR eval：运行结果： ? ? 由于脚本没有按顺序执行，出现未定义的错误。...代码： /* 数组queuedScripts存储执行队列中的脚本，每个脚本是拥有三个属性的对象： response: XHR响应 onload: 脚本加载后触发的函数 bOrder: 如果该脚本需要依赖其他脚本按顺序执行

1.8K2 0

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

这个事件触发之后（而不是window.load事件），会进入异步事件驱动阶段（另一个线程控制）。也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。...，不确定图片的样式到底如何，牵扯到重绘资源问题）,js不会阻塞img的解码、paint（估计chrome做了优化，具体本人还不知，希望客官补充）。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...如果页面还是没有解析完成，就会停下来（阻塞页面）等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。...而当页面有大量的二进制文件（页面加载的时长大于阻塞的时长的时候），document.readyState=complete 可能反而在 onload 事件之后才能触发(这个我未完成验证出这种情况) 我觉得

1.6K2 0

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

这个事件触发之后（而不是window.load事件），会进入异步事件驱动阶段（另一个线程控制）。也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。...，不确定图片的样式到底如何，牵扯到重绘资源问题）,js不会阻塞img的解码、paint（估计chrome做了优化，具体本人还不知，希望客官补充）。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...如果页面还是没有解析完成，就会停下来（阻塞页面）等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。...而当页面有大量的二进制文件（页面加载的时长大于阻塞的时长的时候），document.readyState=complete 可能反而在 onload 事件之后才能触发(这个我未完成验证出这种情况) 我觉得

4.8K15 0

10 种CORS跨域解决方案

1.同源策略跨域问题其实就是浏览器的同源策略所导致的。同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。...情况四: 请求中的任意XMLHttpRequestUpload对象均没有注册任何事件监听器；XMLHttpRequestUpload对象可以使用XMLHttpRequest.upload属性访问。...情况五: 请求中没有使用ReadableStream对象。 b.非简单请求除以上情况外的。 c.Node 中的解决方案原生方式我们来看下后端部分的解决方案。...cookie 问题想要传递cookie需要满足 3 个条件 1.web请求设置withCredentials 这里默认情况下在跨域请求，浏览器是不带 cookie 的。...> let first = true; // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name function load() { if (first

4.8K2 0

onload 和 domready

事件就会迟迟无法触发所以出现了 DOM Ready 事件熟悉 jQuery的人，都知道 DomReady 事件 $(document).ready(function(){ alert("jQuery... 事件比 onload 事件快许多，它是在 DOM 准备完毕后触发（不需等待资源下载完毕） DOMContentLoaded 事件在许多 Webkit 浏览器以及 IE9 上都可以使用，此事件会在 DOM...所以目前所有的 hack 方法都是为了让 IE6,7,8支持 DOM Ready 事件下面代码可以发现 jQuery 的 ready 事件稍微早于 DOMContentLoaded 事件，但都是实现了...，比如一张图片只要 img 标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等； 2、Dom Load 是在整个 document 文档（包括了加载图片等其他信息）加载完成后就可以直接对...一样，会在页面或图像加载完成后触发（即所有元素的资源都下载完毕），但是： FireFox 的 script 元素不支持 onreadystatechange 事件，只支持 onload 事件 IE 的

2.6K2 0

《微信小程序七日谈》- 第三天：玩转Page组件的生命周期

今天这篇文章简单记录一下在使用小程序Page组件时对于其生命周期的一些使用心得。...浏览器的用户行为事件机制，以及我们所熟悉的jQuery中，使用on作为捕获/监听事件的API命名，这种情形下可以把on理解为当某件事情发生时做某些行为，这也是大部分前端工程师对on语义的理解。...onload的触发时机是在文档加载完成之后，在执行我们定义的onload逻辑之前，文档已经完成了load行为。也就是说，onload并没有拦截load行为，而是在load事件之后发生。...具体到Page的生命周期钩子函数，大家请凭第一感觉理解下面几个函数的执行时机： onLoad onShow onReady 我相信大部分人对于这三者的理解是：钩子函数在load/show/ready完成之后执行...小程序中并没有父子组件的关系谱，组件的数据不会区分props和state，全部是统一的data，并且全部是动态的。任何data的修改都会触发Rerender。

1.2K10 0

用框架的你，可能早已忽略了这些事件API

乍一看，DOMContentLoaded 事件非常简单。DOM 树准备就绪 —— 这是它的触发条件。它并没有什么特别之处。...window.onload 当整个页面，包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。...[4] img onload [4] readyState:complete [4] window onload 方括号中的数字表示发生这种情况的大致时间。...当页面和所有资源都加载完成时，window 上的 load 事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。...当用户最终离开时，window 上的 unload 事件就会被触发。在处理程序中，我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制，它很少被使用。

1.8K1 0

JavaScript 开发者需要了解的15个 DevTools 技巧

查找未使用的 JavaScript Chrome 的 Coverage 面板可以让你能够快速找到 JavaScript 有没有被使用。...DOM 中被删除发生此类事件时，将在 Sources 面板中自动触发断点。...断点有的时候并不好用，例如，如果在运行 1000 次的循环的最后一次循环报错了。这时你可以添加一个条件断点，让它仅在满足特定条件时才触发断点，例如 i > 999 。...这可以让你: 在不需要构建工具的情况下在实时编辑脚本或样式离线开发一个网站，该网站通常会要求第三方域提供基本文件临时替换不必要的脚本，例如 analytics。...强制触摸而不是鼠标或其他本机设备事件。设置空闲状态以检查你的应用如何响应锁定屏幕。

4.8K2 0

jquery $(document).ready()与window.onload的区别

在常规的 Javascript 代码中，通常使用 window.onload 方法，而在jQuery中，使用的是$(document).ready() 方法，极大的提高Web应用程序的速度。...另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。...要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load()方法。 Load()方法会在元素的onload 事件中绑定一个处理函数。...jQuery 代码如下： $(window).load(function (){ // 编写代码 }); //等价于 JavaScript 中的以下代码 Window.onload...的ready()方法请注意，如果事件已经被触发，回调将不会被执行。

1.6K3 1

HTML解析之DOMContentLoaded和onload

说在前面在很久很久以前，我在封装自己的JQuery库时就使用过DOMContentLoaded，觉得这个知识点看看别的文章就行了，不过现在我想把它记下来。...（在DOMContentLoaded事件触发之前）。...不同的是执行时机，async在代码加载完之后会马上执行，并且执行时会阻塞HTML解析。而defer则要等到文档解析DOM构建完成，DOMContentLoaded事件触发之前执行。...另一个不同的事件 load 应该仅用于检测一个完全加载的页面。在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。...注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。

1.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭