JQuery 加载 CSSJS 文件的方法有哪些?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery 加载 CSSJS 文件的方法有哪些?相关的知识,希望对你有一定的参考价值。

在进行web前端开发(http://www.maiziedu.com/course/web-px/时,我们可能会需要使用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 文件的时候,网络卡掉了,所以,需要换种方式加载,使用 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});

以上就jquery加载js文件、css文件的几种方法,大家可以根据自己的喜好来选择种类。希望能帮助到大家。

 

以上是关于JQuery 加载 CSSJS 文件的方法有哪些?的主要内容,如果未能解决你的问题,请参考以下文章

iframe每个页面加载css js

Yii2 加载cssjs 载静态资源

jQuery的使用方法有哪些?

解决nginx部署后cssjs图片等样式不加载的问题

Joomla T3模板启用CSSJS优化

提高页面加载速度