zoukankan      html  css  js  c++  java
  • 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
    });
    

    参考资料:

  • 相关阅读:
    第009讲:了不起的分支和循环3
    Term_Application
    十大编程算法助程序员走上高手之路
    每天工作4小时的程序员
    编程真相_节选
    Sublime_Snippet
    VIM资源管理
    微信企业号开发资源整理
    vitruviano
    VIM_git
  • 原文地址:https://www.cnblogs.com/xishuai/p/jquery-load-css-and-js-file.html
Copyright © 2011-2022 走看看