jQuery.ready() function and asynchronous CSS

Question

I want to load my website CSS asynchronously. I want to know if jQuery.ready() function will run after the async load of the CSS is completed or will jQuery ignore it and the CSS might finish loading after jQuery.ready() function starts running.

Aren't you just looking for window onload event??? – A. Wolff Jul 27 '15 at 10:23 — A. Wolff, Jul 27 '15 at 10:23
If that's can solve my issue, I don't know. – Liron Harel Jul 27 '15 at 13:41 — Liron Harel, Jul 27 '15 at 13:41

score 1 · Accepted Answer · answered Jul 30 '15 at 03:37

Try utilizing $.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>

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Short answer - no. $(document).ready() will not wait for asynchronous loading to finish. It will fire as soon as DOM is loaded.

Normally you would put async loading functions inside (document).ready() so they start executing as soon as they safely can. It's a little weird that you're trying to perform async CSS loading before the DOM. $(document).ready() is an event-trigger function. It's cannot be made to wait.

Please elaborate on what exactly you are trying to accomplish.

P.S. Please read this "execution sequence" answer: Load and execution sequence of a web page?

edited May 23 '17 at 12:22

Community

1
1

answered Jul 28 '15 at 21:25

Victor Levin

1,167
6
11

I want to load CSS asynchronously but want to run jquery code afterwards – Liron Harel Jul 30 '15 at 02:46

score -1 · Answer 3 · answered Jul 24 '15 at 04:22

-1

jQuery.ready() runs when the DOM has been loaded.

If you wish to load some CSS asynchronously, then your best bet would be to insert link tag in the head in the ready callback.

In other words...

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

Hope it helps!

answered Jul 24 '15 at 04:22

Hemant

1,999
2
12
8

1

I think you have not read the question properly. He wants to load css async first and then document.ready should work. – Rohit Arora Jul 24 '15 at 04:24

jQuery.ready() function and asynchronous CSS

3 Answers3

Linked