Question

我想异步加载我的网站CSS。我想知道在完成CSS的异步加载后是否会运行jQuery.ready()函数，或者jQuery会忽略它，并且在jQuery.ready()函数开始运行后CSS可能会完成加载。

Answer 1

尝试使用$.holdReady()

// set `$.holdReady()` to `true`
$.holdReady(true);
// do stuff at `$.holdReady(true)`
// e.g., call hide `body` element
$("body").hide();
// load asynchronous `css`
$("<style>")
.appendTo("head")
.load("https://gist.githubusercontent.com/anonymous/ec1ebbf8024850b7d400/"
      + "raw/906431c0472286e141b91aac1676369bbb8d2f97/style.css"
      , function(e) {
  // set `$.holdReady()` to `false`
  $.holdReady(false);
});
// do stuff at `$.holdReady(false)`
$(document).ready(function() {
  $("body").show();
  alert("ready");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body>
  <div>
    abc
  </div>
    <div>
    123
  </div>
</body>

Answer 2

简短回答 - 不。 $(document).ready()不会等待异步加载完成。它会在加载DOM后立即触发。

通常你会将async加载函数放在(document).ready()中，这样他们就可以在安全的情况下尽快开始执行。您在DOM之前尝试执行异步CSS加载有点奇怪。 $(document).ready()是一个事件触发函数。不能让它等待。

请详细说明您要完成的目标。

P.S。请阅读此＆＃34;执行顺序＆＃34;回答： Load and execution sequence of a web page?

Answer 3

jQuery.ready（）在加载DOM时运行。

如果你想异步加载一些CSS，那么最好的办法就是在准备好的回调中在头部插入 link 标签。

换句话说......

<script language="javascript">
   $(document).ready(function()
    {
         $("head").append("<link rel=stylesheet href='yourfile.css' type='text/css'/>");
    }
   )
</script>

希望它有所帮助！

jQuery.ready（）函数和异步CSS

3 个答案: