Question

我通过以下方式加载CSS：

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

它有效，但我有一个需要在应用CSS后运行的函数，我不想使用setInterval。

我该怎么做？

Answer 1

一种解决方案，如果您可以访问正在加载的css文件，是使用transitionend事件，并从您的CSS激活转换，duration设置为0.1。

像这样，你确定已经计算了CSS。

<强> style2.css

 body{opacity:1;}

<强>的index.html

<style>
    body{transition : opacity 0.1s linear; opacity:.9};
</style>
<body>
   ...
<script>
    document.body.addEventListener('transitionend', function(){
        alert('done');
       }, false);
    $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

编辑：
对于需要js函数的函数（没有外部文件）：https://jsfiddle.net/t0akchuw/

Answer 2

您可以使用load event

＆＃13;

$('<link />', {
  rel: 'stylesheet',
  ref: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css',
  type: 'text/css',
  onload: function() {
    snippet.log('loaded')
  }
}).appendTo('head')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

＆＃13;

另一种语法

$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" type="text/css" onload="dosomething()" />');

function dosomething(){
    alert('d')
}

jQuery附加CSS文件并等待直到应用样式而没有setInterval？

2 个答案: