计算机教程

当前位置:澳门娱乐场网址 > 计算机教程 > 异步加载JS、CSS代码(推荐)

异步加载JS、CSS代码(推荐)

来源:http://www.ablakeforum.com 作者:澳门娱乐场网址 时间:2019-08-31 07:41

我的风格你懂得,具体详情介绍如下

展现效果:

关键代码如下所示:

1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现.

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");
}

图片 1

以上所述是小编给大家介绍的异步加载JS、CSS代码的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

实现思路:

您可能感兴趣的文章:

1.当用户点击load button执行异步请求. 调用方法 出现加载条

2.怎么实现进度条呢?

1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index =

  1. 加载的时候让用户无法修改界面值

2) 在document.body 新增一个动态的div.

代码实现:

Main.html:

本文由澳门娱乐场网址发布于计算机教程,转载请注明出处:异步加载JS、CSS代码(推荐)

关键词: