首页 > 如何判断Javascript script标签加载完毕

如何判断Javascript script标签加载完毕

需求

当前我开发了一个Javascript插件,它拥有两部分LOADER(用于加载MAIN和其他额外操作)和MAIN(插件主体),LOADER会在某个时刻(由用户的操作事件决定)加载,而我希望MAIN在页面所有script标签加载并且执行完毕后再加载。

困境

在常规思路中,使用window.onload可以在window加载后加载MAIN,然而,某些复杂页面本身可能已经存在插件,而MAIN应该在所有插件的script标签加载并且执行完毕后再加载。

思路

由于其他插件可能动态加载script插件。我当前的想法是在LOADER中获取所有script标签(document.getElementsByTagName('script')),然后判断它们是否都已经加载了,如果全部都加载了,则加载MAIN,如何没有全部完成加载,则setInterval等待。然而问题是,在IE中,script标签有readyState来判断script状态,而其他浏览器没有。虽然可以使用script.onload最为触发机制,但是在LOADER加载后,可能已经有些script已经加载,对于这些script标签,它们的onload事件永远不会触发,因此我们在这里并不知道未加载script的个数是多少,因此也不能确定MAIN该何时加载。


看上去你需要一个js包管理器

在这方面国际标准最常用的是 http://requirejs.org/

国内的seajs也是非常不错的选择 http://seajs.org/


不加 defer 或 async 的情况下,可以在 script 标签上加上 onload 属性


页面里的script都是顺序执行的,除非加了defer或async这种属性的异步script。
也无法去判断之前script的完成情况。


使用 head.js 这样的插件可以满足你的需要。
如果需要研究如果兼容各浏览器的话,看一下 head.load.js 非常有益。

http://headjs.com/

【热门文章】
【热门文章】