让页面中的js实现同步加载

最新推荐文章于 2024-10-03 10:59:08 发布

lixp3

最新推荐文章于 2024-10-03 10:59:08 发布

阅读量1.7w

点赞数

分类专栏： javascript 文章标签： xmlhttprequest function callback javascript xhtml url

本文链接：https://blog.csdn.net/lxp1021/article/details/6216310

版权

本文介绍了如何通过创建一个名为`first.js`的文件，包含`loadScript`函数，实现JavaScript的同步加载，避免因文件加载顺序引起的错误。`loadScript`利用XMLHttpRequest的readyState属性确保脚本按顺序加载。在页面中调用该方法，可以为多个JS文件实现同步加载。

摘要由CSDN通过智能技术生成

前一段时间看一本《高性能网站建设进阶指南》这本书，提到页面中的js并不是同步加载的，这就会导致如果几个js文件是互为牵制的话，可能会造成有未读取到的js没有及时生成元素而报错的问题，而今天也是在网上看到了一篇叫做js同步加载最佳实践的文章，提出了一个能把多个js文件实现同步加载的最佳的办法。

1.方法思路：

a.在页面底部添加一个叫做first的js文件，这个文件里有一个loadScript的方法，这个方法有两个参数一个是url，另一个是返回函数，而这个loadjs的方法则是通过XMLHttpRequest对象readyState的五个状态来为页面添加含有src属性的script代码。

b.在页面中调用这个first.js文件，并在页面底部调用这个方法，需要添加几个js就调用几次。

2.方法代码：

a.编写first.js的loadScript的方法

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"){