异步加载JS与CSS代码实现方案

作者:异步漫步时间:2026-10-30 09:09:32浏览:287

本文介绍了一种通过JavaScript动态创建script标签并设置async属性来实现JS和CSS异步加载的方法。该方法通过递归调用确保依赖顺序,适用于需要优化页面加载速度的场景,帮助开发者提升前端性能。

异步加载JS与CSS代码实现方案

具体实现细节如下文所述。

核心实现代码如下:


function AsyncLoad(V_tag,V_src)
{
if (V_tag == "script") {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = V_src;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
s.onload = function () {
if (V_src == "../Content/Scripts/jquery-2.1.1.min.js") {
AsyncLoad("script", "../Content/Scripts/public-effect.js");
AsyncLoad("script", "../Content/Scripts/d3.v3.min.js");
AsyncLoad("script", "../Content/Scripts/Common.js");
AsyncLoad("script", "../Content/Scripts/mobilePie.js");
}
if (V_src == "../Content/Scripts/d3.v3.min.js")
{
AsyncLoad("script", "../Content/Scripts/Ticket/MyPCs.js");
}
}
} else {
var s = document.createElement('link');
s.async = true;
s.rel = "stylesheet"
s.href = V_src;
var x = document.getElementsByTagName('link')[0];
x.parentNode.insertBefore(s, x);
s.onload = function () {
}
}
}
window.onload = function () {
AsyncLoad("link", "../Content/stylesheets/swiper-3.2.7.min.css");
AsyncLoad("script", "../Content/Scripts/jquery-2.1.1.min.js");
AsyncLoad("script", "../Content/Scripts/swiper-3.2.7.jquery.min.js");
}

上述内容即为异步加载JS与CSS代码的完整介绍,希望能对读者有所帮助。如有任何疑问,欢迎留言,小编将及时回复。同时,感谢大家对本站的支持!

作者最新文章