web-dev-qa-db-ja.com

jQueryを使用しないコールバックでJavaScriptを使用してCSSファイルを動的にロードする

JavaScriptを使用してcssファイルを動的にロードしようとしていますが、他のjsライブラリ（jQueryなど）は使用できません。

Cssファイルはロードされますが、コールバックを取得できないようです。以下は私が使用しているコードです

var callbackFunc = function(){
    console.log('file loaded');     
};
var head = document.getElementsByTagName( "head" )[0];
var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", url);

    fileref.onload  = callbackFunc;
    head.insertBefore( fileref, head.firstChild );

次のコードを使用してスクリプトタグを追加してjsファイルをロードすると、動作し、コールバックが発生します。

var callbackFunc = function(){
    console.log('file loaded');     
};

var script = document.createElement("script");

script.setAttribute("src",url);
script.setAttribute("type","text/javascript");

script.onload  = callbackFunc ;

head.insertBefore( script, head.firstChild );

ここで何か間違ったことをしていますか？これを達成するのに役立つ他の方法は大歓迎でしょうか？

javascriptcsscallbackloading
31
U.Ahmad

残念ながら、最新のほとんどのブラウザではスタイルシートのオンロードサポートはありません。少しグーグルで見つけた解決策があります。

引用元：http://thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof =

基礎

これの最も基本的な実装は、わずか30行の-フレームワークに依存しない-JavaScriptコードで実行できます。

function loadStyleSheet( path, fn, scope ) {
   var head = document.getElementsByTagName( 'head' )[0], // reference to document.head for appending/ removing link nodes
       link = document.createElement( 'link' );           // create the link node
   link.setAttribute( 'href', path );
   link.setAttribute( 'rel', 'stylesheet' );
   link.setAttribute( 'type', 'text/css' );

   var sheet, cssRules;
// get the correct properties to check for depending on the browser
   if ( 'sheet' in link ) {
      sheet = 'sheet'; cssRules = 'cssRules';
   }
   else {
      sheet = 'styleSheet'; cssRules = 'rules';
   }

   var interval_id = setInterval( function() {                     // start checking whether the style sheet has successfully loaded
          try {
             if ( link[sheet] && link[sheet][cssRules].length ) { // SUCCESS! our style sheet has loaded
                clearInterval( interval_id );                      // clear the counters
                clearTimeout( timeout_id );
                fn.call( scope || window, true, link );           // fire the callback with success == true
             }
          } catch( e ) {} finally {}
       }, 10 ),                                                   // how often to check if the stylesheet is loaded
       timeout_id = setTimeout( function() {       // start counting down till fail
          clearInterval( interval_id );             // clear the counters
          clearTimeout( timeout_id );
          head.removeChild( link );                // since the style sheet didn't load, remove the link node from the DOM
          fn.call( scope || window, false, link ); // fire the callback with success == false
       }, 15000 );                                 // how long to wait before failing

   head.appendChild( link );  // insert the link node into the DOM and start loading the style sheet

   return link; // return the link node;
}

これにより、次のようなonloadコールバック関数を使用してスタイルシートをロードできます。

loadStyleSheet( '/path/to/my/stylesheet.css', function( success, link ) {
   if ( success ) {
      // code to execute if the style sheet was loaded successfully
   }
   else {
      // code to execute if the style sheet failed to successfully
   }
} );

または、コールバックでスコープ/コンテキストを維持する場合は、次のようなことを行うことができます。

loadStyleSheet( '/path/to/my/stylesheet.css', this.onComplete, this );
37
mVChr

Htmlファイルに空のcssリンクを作成し、リンクにIDを与えることができます。例えば

<link id="stylesheet_css" rel="stylesheet" type="text/css" href="css/dummy.css?"/>

次に、ID名で呼び出して、「href」属性を変更します

5
thecodeparadox

このVanilla JSのアプローチは、すべての最新のブラウザーで機能します。

let loadStyle = function(url) {
  return new Promise((resolve, reject) => {
    let link    = document.createElement('link');
    link.type   = 'text/css';
    link.rel    = 'stylesheet';
    link.onload = () => { resolve(); console.log('style has loaded'); };
    link.href   = url;

    let headScript = document.querySelector('script');
    headScript.parentNode.insertBefore(link, headScript);
  });
};

// works in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add an ES6 polyfill for the Promise (or rewrite to use a callback)
5
sandstrom

しばらく前に、私はこのためのライブラリを作成しました。これは Dysel と呼ばれます。

例： https://jsfiddle.net/sunrising/qk0ybtnb/

var googleFont = 'https://fonts.googleapis.com/css?family=Lobster';
var jquery = 'https://code.jquery.com/jquery.js';
var bootstrapCss = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
var bootstrapJs = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js';
var smokeCss = 'https://rawgit.com/alfredobarron/smoke/master/dist/css/smoke.min.css';
var smokeJs = 'https://rawgit.com/alfredobarron/smoke/master/dist/js/smoke.min.js';

// Push links into an array in the correct order
var extRes = [];
extRes.Push(googleFont);
extRes.Push(bootstrapCss);
extRes.Push(smokeCss);
extRes.Push(jquery);
extRes.Push(bootstrapJs);
extRes.Push(smokeJs);

// let this happen
dysel({
  links: extRes,
  callback: function() {
    alert('everything is now loaded, this is awesome!');
  }, // optional
  nocache: false, // optional
  debug: false // optional
});
5
Alessandro Annini

方法は次のとおりです。 「requestAnimationFrame」を使用する（または、使用できない場合は単純な「load」イベントにフォールバックする）。

ちなみに、これはGoogleが「ページ速度」マニュアルで推奨している方法です。 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

<script>
    function LoadCssFile(cssPath) {
        var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = cssPath;
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    }
    var cb = function() {
        LoadCssFile('file1.css');
        LoadCssFile('file2.css');
    };
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script>
1
Serge Shultz

yepnope.js CSSをロードし、完了時にコールバックを実行できます。例えば.

yepnope([{
  load: "styles.css",
  complete: function() {
    console.log("oooooo. shiny!");
  }
}]);
0
David Palmer