10

ロードされたドキュメントのスタイルシートリンクを変更し、新しいcssがロードされるまで待ってから、適切なjsコードを実行することは可能かどうか疑問に思います

提案をありがとう

4

6 に答える 6

5

html：

<link id="mystylesheet" href="/path/to/css.css" />

コード：

$("#mystylesheet").load(function(){
  //Your javascript
}).attr("href", "/new/path/to/css.css");

これにより、現在のCSSが置き換え.load()られ、新しいCSSファイルがフェッチされた後にハンドラー内のコードが実行されます。

于 2012-09-04T22:34:24.787 に答える
3

@ahrenはほぼ正しかった。ただし、リンク要素のhrefを動的に変更して、cssファイルの読み込みが完了したときにコールバックを使用しても、ほとんどのモバイルデバイスでは機能しないようです。

代わりに、loadを使用してスタイル要素にスタイルを直接挿入してみてください..モバイルブラウザを含むほとんどの最新のブラウザでサポートされることになります

IE8のサポートを含むように更新されました-; 注：これには、cssがロードされたことを確認するためにダミールールをcssに挿入する必要があります（この場合、body {ready：true;}を使用します）

css

body {ready:true;}
...

html

<style id="your-style-element"></style>

javascript

if (document.createStyleSheet) {

    //Wait for style to be loaded
    var wait = setInterval(function(){
      //Check for the style to be applied to the body
      if($('body').css('ready') === 'true') {
        clearInterval(wait);

        //CSS ready
      }
    }, 300);

    document.createStyleSheet(url);
} else {
    //Dynamically load the css for this doc
    $("#your-style-element").load(url,function(){

       //CSS ready
    });
}
于 2014-10-02T20:55:28.600 に答える
0

この男を試してみてください：http：//forum.jquery.com/topic/loading-stylesheets-on-the-fly

または：http ：//www.rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx または jQueryを使用したスタイルシートの変更

それが原因に合うことを願っています:)

コード

var link = $("<link>");
link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: <your CSS file url>
});
$("head").append( link );
于 2012-09-04T22:34:23.397 に答える
0

この場合のために私が特別に書いたプラグインを試すことができます。

.load()の方法がわからないので、jQueryクロスブラウザではないようです。IEのみonload=""がリンク要素afaikのイベントをサポートします。

于 2014-05-05T07:09:50.593 に答える
0

これが私が書いた要点で、たった47のLOCで完璧に機能します。

https://gist.github.com/aleclarson/ac6456c75edae9fe9d9b6938142a065b

これは、指定されたすべてのURLフラグメントがロードされるまで、すべてのフレームrequestAnimationFrameをチェックするために使用されます。document.styleSheets

例：

const styles = require('./styles')
const promise = styles.onLoad('foo.css', 'bar.css')
promise.then(() => console.log('Styles loaded!'))

純粋なJavaScriptも！

于 2017-11-14T01:41:46.650 に答える
0

TeaCoderはhttps://stackoverflow.com/a/35644406/20774でこの質問に対する良い答えを持っています。

基本的にelementsonloadメソッドを使用し、スタイルがロードされた後に実行するロジックを配置します。

組み込みのDOM機能を使用してそれを行うのは良い方法ですが、コールバック構文は少し厄介です。これが私がPromisesでそれをした方法です：

const createOnLoadPromise = (htmlElement) =>
  new Promise((resolve) => {
    htmlElement.onload = resolve;
  });
const link1 = document.head.appendChild(createStyleLink(href1));
const link2 = document.head.appendChild(createStyleLink(href2));
await Promise.all([
  createOnLoadPromise(link1),
  createOnLoadPromise(link2),
]);
// do whatever you need to do after the await
于 2019-08-30T20:29:21.117 に答える