开发者社区> 技术小哥哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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,如需转载请自行联系原作者

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

相关文章
JVM从入门到入土之JVM的类文件结构
前言 文本已收录至我的GitHub仓库,欢迎Star:github.com/bin39232820… 种一棵树最好的时间是十年前,其次是现在
28 0
jQuery_浏览器事件、文档加载事件|学习笔记
快速学习 jQuery_浏览器事件、文档加载事件
134 0
文件存储 HDFS添加挂载点前提条件及步骤
挂载点是文件系统实例在专有网络或经典网络内的一个访问目标地址,每个挂载点都对应一个域名,ECS和容器需要通过此域名访问文件存储HDFS中的数据。文件存储HDFS目前只支持专有网络类型挂载点。
535 0
vs2010 单文档MFC 通过加载位图文件作为客户区背景
实现效果: 这个其实是一个非常常见的功能,大家都会考虑给自己简单的工程做一个背景界面。其实只要在view类中重载OnEraseBkgnd()这个函数就好了。 代码如下: BOOL CdddView::OnEraseBkgnd(CDC* pDC) { // ...
1132 0
jquery插件 - 跟随屏幕滚动的层
直接看DEMO选择使用即可。 跟随屏幕滚动的层插件
720 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
JS零基础入门教程(上册)
立即下载
JS 语言在引擎级别的执行过程
立即下载