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

相关文章
|
6月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1026 58
|
3月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
759 0
|
8月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
8月前
|
JavaScript 前端开发
jQuery和CSS3超酷全屏视觉差幻灯片特效
jQuery和CSS3超酷全屏视觉差幻灯片特效
|
10月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
138 22
|
11月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
144 21
|
11月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
302 16
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
247 0
Next.js 实战 (六):如何实现文件本地上传
|
11月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
130 2
|
11月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。

热门文章

最新文章

下一篇
开通oss服务