10

I wonder whether it's possible to change stylesheet link of the loaded document, then wait till the new css is loaded, and then run appropriate js code

thanks for any suggestions

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 .. 将样式直接注入样式元素中，最终得到包括移动浏览器在内的大多数现代浏览器的支持

更新以包括对 IE 8- 的支持；注意这需要你在你的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

你可以试试我专门为这个案例写的插件。

不确定的.load()方法jQuery，它似乎不是跨浏览器。只有 IE 支持onload=""链接元素上的事件，afaik。

于 2014-05-05T07:09:50.593 回答
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

这是我写的一个要点，它在 47 LOC 中完美运行：

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

它用于requestAnimationFrame检查document.styleSheets每一帧，直到每个给定的 URL 片段都已加载。

例子：

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 回答