欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

動態(tài)加載js、css的簡單實現(xiàn)代碼

 更新時間:2016年05月26日 10:09:03   投稿:jingxian  
下面小編就為大家?guī)硪黄獎討B(tài)加載js、css的簡單實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一、原生js:

/**
     * 加載js和css文件
     * @param     jsonData.path        前綴路徑
     * @param     jsonData.url        需要加載的js路徑或css路徑
     * @param     jsonData.type        需要加載的類型 js或css
    */
     function loadWriteFiles(jsonData)
     {
       jsonData.path = jsonData.path != undefined ? jsonData.path : "";
       if(jsonData.type == "js")
       {
        document.writeln("<script type='text/javascript' src='"+ jsonData.path + jsonData.url+"'></script>");
       }
       else if(jsonData.type == "css")
       {
        document.writeln("<link rel='stylesheet' href='"+jsonData.path + jsonData.url+"' type='text/css' />");
       }
     }
     
     /**
     * 加載js或css到head中
     * @param     jsonData.path        前綴路徑
     * @param     jsonData.url        需要加載的js路徑或css路徑
     * @param     jsonData.type        需要加載的類型 js或css
     */
     function loadFilesToHead(jsonData)
     {
       jsonData.path = jsonData.path != undefined ? jsonData.path : "";
       if(jsonData.type == "js")
       {
         var _js = document.createElement("script");
         _js.setAttribute("type", "text/javascript");
         _js.setAttribute("src", jsonData.path + jsonData.url);
         _js.onload = _js.onreadystatechange=function(){ 
           if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ 
             if("function" == typeof(jsonData["callback"]) && jsonData["callback"]){
                jsonData["callback"].call(this);
             }
           } 
           _js.onload=_js.onreadystatechange=null; 
         } 
         document.getElementsByTagName("head")[0].appendChild(_js);//追加到head標(biāo)簽內(nèi)
       }
       else if(jsonData.type == "css")
       {
         var _css = document.createElement("link");
         _js.setAttribute("type", "text/css");
         _css.setAttribute("rel", "stylesheet");
         _css.setAttribute("href", jsonData.path + jsonData.url);
         document.getElementsByTagName("head")[0].appendChild(_css);//追加到head標(biāo)簽內(nèi)
       }
     }

二、jquery版本:

采用deferred對象返回結(jié)果

var uiLoad = uiLoad || {};

(function($, $document, uiLoad) {
  "use strict";

  var loaded = [],
  promise = false,
  deferred = $.Deferred();

  uiLoad.load = function (srcs) {
    srcs = $.isArray(srcs) ? srcs : srcs.split(/\s+/);
    if(!promise){
      promise = deferred.promise();
    }

   $.each(srcs, function(index, src) {
    promise = promise.then( function(){
      return src.indexOf('.css') >=0 ? loadCSS(src) : loadScript(src);
    } );
   });
   deferred.resolve();
   return promise;
  };

  var loadScript = function (src) {
    if(loaded[src]) return loaded[src].promise();

    var deferred = $.Deferred();
    var script = $document.createElement('script');
    script.src = src;
    script.onload = function (e) {
      deferred.resolve(e);
    };
    script.onerror = function (e) {
      deferred.reject(e);
    };
    $document.body.appendChild(script);
    loaded[src] = deferred;

    return deferred.promise();
  };

  var loadCSS = function (href) {
    if(loaded[href]) return loaded[href].promise();

    var deferred = $.Deferred();
    var style = $document.createElement('link');
    style.rel = 'stylesheet';
    style.type = 'text/css';
    style.href = href;
    style.onload = function (e) {
      deferred.resolve(e);
    };
    style.onerror = function (e) {
      deferred.reject(e);
    };
    $document.head.appendChild(style);
    loaded[href] = deferred;

    return deferred.promise();
  }

})(jQuery, document, uiLoad);

以上這篇動態(tài)加載js、css的簡單實現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript創(chuàng)建對象的七種經(jīng)典方式分享

    JavaScript創(chuàng)建對象的七種經(jīng)典方式分享

    JavaScript 創(chuàng)建對象的方式有很多,通過 Object 構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個對象,顯然這兩種方式會產(chǎn)生大量的重復(fù)代碼,并不適合量產(chǎn)。本文介紹了七種非常經(jīng)典的創(chuàng)建對象的方式,希望對大家有所幫助
    2022-11-11
  • 微信小程序?qū)崿F(xiàn)星級評價

    微信小程序?qū)崿F(xiàn)星級評價

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級評價,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • 簡單實用的網(wǎng)頁表格特效

    簡單實用的網(wǎng)頁表格特效

    簡單實用的網(wǎng)頁表格特效...
    2006-07-07
  • javascript if條件判斷方法小結(jié)

    javascript if條件判斷方法小結(jié)

    今天在為網(wǎng)站增加一些代碼功能的時候,需要用到if條件判斷,發(fā)現(xiàn)簡寫方法忘了,這里特整理下
    2014-05-05
  • 不間斷循環(huán)滾動效果的實例代碼(必看篇)

    不間斷循環(huán)滾動效果的實例代碼(必看篇)

    下面小編就為大家?guī)硪黄婚g斷循環(huán)滾動效果的實例代碼(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • javscript 數(shù)組扁平化的實現(xiàn)

    javscript 數(shù)組扁平化的實現(xiàn)

    這篇文章主要介紹了javscript 數(shù)組扁平化的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • js實現(xiàn)動態(tài)增加文件域表單功能

    js實現(xiàn)動態(tài)增加文件域表單功能

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)動態(tài)增加文件域表單功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-10-10
  • 微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件(可帶文本框)

    微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件(可帶文本框)

    這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件(可帶文本框)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • 如何為你的JS項目添加智能提示與類型檢查詳解

    如何為你的JS項目添加智能提示與類型檢查詳解

    這篇文章主要給大家介紹了關(guān)于如何為你的JS項目添加智能提示與類型檢查的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 小程序文字跑馬燈效果

    小程序文字跑馬燈效果

    這篇文章主要為大家詳細(xì)介紹了小程序文字跑馬燈效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12

最新評論