异步加载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代码的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • nodejs实现bigpipe异步加载页面方案

    Bigpipe介绍 Facebook首创的一种减少HTTP请求的,首屏快速加载的的异步加载页面方案.是前端性能优化的一个方向. BigPipe与AJAX的比较 AJAX主要是XMLHttpRequest,前端异步的向服务器请求,获取动态数据添加到网页上.这样的往返请求需要耗费时间,而BigPipe技术并不需要发送XMLHttpRequest请求,这样就节省时间损耗.减少请求带来的另一个好处就是直接减少服务器负载.还有一个不同点就是AJAX请求前服务器在等待.请求后页面在等待.BIGPIPE可以前

  • JavaScript异步加载浅析

    前言 关于JavaScript脚本加载的问题,相信大家碰到很多.主要在几个点-- 1> 同步脚本和异步脚本带来的文件加载.文件依赖及执行顺序问题 2> 同步脚本和异步脚本带来的性能优化问题 深入理解脚本加载相关的方方面面问题,不仅利于解决实际问题,更加利于对性能优化的把握并执行.   先看随便一个script标签代码-- 复制代码 代码如下: <script src="js/myApp.js"></script> 如果放在<head>上面

  • javascript 文件的同步加载与异步加载实现原理

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行.除IE和较新版本的Firefox外,其他浏览器并未支持. language: 已废弃.大部分浏览器会忽略该值. src: 可选.指定引入的外部代码文件,不限制后缀名. type: 必选.指定脚本的内容类型(M

  • js异步加载的三种解决方案

    默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的. (1) defer,只支持IE defer属性的定义和用法(我摘自w3school网站) defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本

  • 浅析JS异步加载进度条

    浅析JS异步加载进度条

    展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1.当用户点击load button执行异步请求. 调用方法 出现加载条 2.怎么实现进度条呢? 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值 2) 在document.body 新增一个动态的div. 代码实现: Main.html: <!DOCTYPE html> <html>

  • 如何调试异步加载页面里包含的js文件

    如何调试异步加载页面里包含的js文件

    最近在一个新的web项目中开发功能.这个项目的管理界面有一个特点,框架是固定的,不会刷新,每次点新的页面仅仅刷新一个div.div里面不是套的iframe,于是导致了一个问题,用浏览器无法调试异步加载页面里包含的js文件.简单的说就是在调试工具里面看不到异步加载页面里包含的js文件. 网上找到了一个解决办法,就是在需要调试的js文件顶部加一行代码: //@ sourceURL=msgprompt.js 注意,@符号和sourceURL间必须有空格.Chrome下效果: FireFox下也是OK的

  • 点评js异步加载的4种方式

    js异步加载的4种方式,点评开始. 方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript"&g

  • 异步加载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.pare

  • 如何使用headjs来管理和异步加载js

    现在有许多成熟的js模块加载器,比如requirejs和seajs等,但是对一些小的项目来说,它们的功能可能太过于"强大",也许我们只是想要有一个能动态加载js的功能,或许我们只是想装B一下,让自己写出的页面没有一大堆的这样的东西.前面说的两种js加载器都是更强调模块性,也就是更强调js文件的组织和管理,更适用于大的项目. 就像刚刚说的,我只想有一个js文件加载器,我只需提供给它一个js文件的地址就行了的那种呢?那就进入我们的主题了,使用headjs吧. 首先,我想说一下Javascr

  • 如何使用jquery动态加载js,css文件实现代码

    使用jquery动态加载js,css文件 复制代码 代码如下: $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file]:file; for (var i = 0; i < files.length; i++) { var name = files[i].replace(/^\s|\s$/g, ""); var att =

  • 详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)

    最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结 为什么是webpack 1.webpack一下自己就

  • JavaScript文件的同步和异步加载的实现代码

    JavaScript文件的同步和异步加载的实现代码

    对于JS文件的引用,尽管当前有不少框架和工具(比如webpack,commonjs,requiresjs等)都做了很好的处理.但是抛开这些框架,了解原生的加载方式还是不无裨益.本文简述一些js文件的同步和异步加载方式. 同步加载 可在html文件里以<script>标签插入,这是初学时最基本的方式. 准备两个js文件如下: calc1.js console.log('calc1 loading begin') function add(...args) { return args.reduce

  • jquery动态加载js/css文件方法(自写小函数)

    先来看jquery自带的getSrcript文件 方法 $.getScript(url,callback) 实例 复制代码 代码如下: var testVar = 'New JS loaded!'; alert(testVar); function newFun(dynParam) { alert('You just passed '+dynParam+ ' as parameter.'); } 动态调用方法 复制代码 代码如下: <script type="text/javascript

  • javascript写的异步加载js文件函数(支持数组传参)

    自己用的加载js文件,支持多文件,不兼容ie 复制代码 代码如下: /** * 加载js文件 * @param  {string || array}   url   js路径 * @param  {Function} fn      加载完成后回调 * @return {object}           game对象 * @example * getScript("url.js",fn) * getScript(["url-1.js","url-2.js

  • 异步加载script的代码

    通过iframe 异步加载script 通过异步请求另一页面的script 是不执行的,只返回html 原文件,因为返回的文本没有经过浏览器的解析执行. 看代码 a1.html 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> </head> <script type="text/javascrip

  • 比较简单的异步加载JS文件的代码

    复制代码 代码如下: <script> function getJsFile(url, callBack){ var XH = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Msxml2.XMLHTTP'); XH.open('get',url,true); XH.onreadystatechange = function(){ if(XH.readyState == 4 && XH.status

  • 异步动态加载js与css文件的js代码

    jquery动态加载css,js文件方法简单很, 例 方法1: 代码如下 复制代码 代码如下: $.getscript("test.js"); 方法2: 代码如下 复制代码 代码如下: function loadjs(file){ var head = $('head').remove('#loadscript'); $("<scri"+"pt>"+"</scr"+"ipt>").a

随机推荐