JQuery 加载 CSS、JS 文件-阿里云开发者社区

开发者社区> 技术小哥哥> 正文

JQuery 加载 CSS、JS 文件

简介:
+关注继续查看

JS 方式加载 CSS、JS 文件:

//加载 css 文件
function includeCss(filename) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.href = filename;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    head.appendChild(link)
}

//加载 js 文件
function includeJs(filename) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';
    head.appendChild(script)
}

上面这种方式很简单,但也会出现一些问题,比如加载 JS 文件之后,需要执行 JS 内的方法,这时候偶尔会找不到方法执行,因为可能加载 JS 文件的时候,网络卡掉了,所以,需要换种方式加载,必须在加载 JS 文件完成之后,执行 JS 内部方法。

JQuery 加载 CSS 文件:

$("head").append("<link>");
var css = $("head").children(":last");
css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "address_of_your_css"
});

Jquery 加载 JS 文件,有两种方式:

$.ajax({
    url: "js file",
    dataType: "script",
    cache: true,
    success: function () {
        //todo
    }
});

$.getScript('js file', function () {
    //todo
});

上面两种方式都可以,并且都是在加载 JS 文件之后,再执行 JS 内部的方法(不会出现找不到方法执行错误),第二种会更简单些。

那如果我们需要加载多个 JS 文件呢?

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function(deferred){
        $(deferred.resolve);
    })
).done(function(){
    //place your code here, the scripts are all loaded
});

如果需要多次调用,也可以抽离出方法:

//定义
$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript( (path||"") + scr );
    });

    _arr.push($.Deferred(function( deferred ){
        $( deferred.resolve );
    }));

    return $.when.apply($, _arr);
}

//调用
var script_arr = [
    'myscript1.js', 
    'myscript2.js', 
    'myscript3.js'
];
$.getMultiScripts(script_arr, '/mypath/').done(function() {
    // all scripts loaded
});

本文转自田园里的蟋蟀博客园博客,原文链接:http://www.cnblogs.com/xishuai/p/jquery-load-css-and-js-file.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery 上传文件
一、定义一个input file 并隐藏   二、点击一个图片时,打开input file的上传窗口   js function fileTest(){ $("#imgsFileInputTable").
765 0
tomcat 加载 war包
引用:http://share.blog.51cto.com/278008/669637 在Tomcat中部署war包很简单: 首先,直接把相应的war包放到$TOMCAT_HOME/webapps下,不用建目录; 然后,修改$TOMCAT_HOME/conf/server.xml,在Host配置段中添加类似于如下内容:   其中,docBase参数标识的是war包的名称。
745 0
JQuery文件上传及以Base64字符串形式呈现图片
一:上传之 首先,你必然得有一个 file input,如下:         其次,让我们 upload,如下: $.ajaxFileUpload({     url: '@ViewBag.
550 0
tomcat 热部署热加载
不重启Tomcat有两种方式:热部署、热加载     1、热部署:容器状况在运行时重新部署整个项目。这类环境下一般整个内存会清空,重新加载,这类方式   有可能会造成sessin丢失等环境。tomcat 6确实可以热部署了,而且对话也没丢.   2、热加载:最好是在调试过程中使用,免患上整个项目加载,Debug标准样式支持热加载。
1038 0
未能加载文件或程序集“System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项
在发布网站时遇到如题错误。 错误消息详细信息:未能加载文件或程序集“System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。
1769 0
javascript 文件的同步加载与异步加载
原文:[转载]javascript 文件的同步加载与异步加载   HTML 4.01 的script属性 charset: 可选。指定src引入代码的字符集,大多数浏览器忽略该值。 defer: boolean, 可选。
853 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11950 0
spring-自动加载配置文件\使用属性文件注入
在上一篇jsf环境搭建的基础上 , 加入spring框架 , 先看下目录结构 src/main/resources 这个source folder 放置web项目所需的主要配置,打包时,会自动打包到WEB-INF下 首先看下pom.
950 0
2010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载