jQuery Append CSS File and Wait until styles are applied without setInterval?

Question

I load CSS by:

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

It works, but I have a function that needs to run after the CSS has been applied, and I don't want use setInterval for it.

How can I do this ?

stackoverflow.com/a/8767297/3344111 or stackoverflow.com/a/26169508/3344111 — Tahir Ahmed
– Tahir Ahmed, Commented Aug 19, 2015 at 2:50
possible duplicate of jQuery Append CSS File and Wait until Loaded? — bestprogrammerintheworld
– bestprogrammerintheworld, Commented Aug 19, 2015 at 4:44
@CVers, none of the solutions in the could be dupe does deal with OP's requirements : "don't use setInterval", accepted answer does this, and "wait until styles are applied", second answer only waits for the document has loaded. — Kaiido
– Kaiido, Commented Aug 19, 2015 at 7:21

Kaiido · Accepted Answer · 2017-09-09 06:09:14Z

7

One solution, if you've got access to the css file you're loading,
is to use the transitionend event, and to activate a transition, with duration set to 0.1, from your css.

Like so, you are sure the CSS has been calculated.

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" />');

Edit:
For the ones that would need a js function (without external files) : https://jsfiddle.net/t0akchuw/

edited Sep 9, 2017 at 6:09

answered Aug 19, 2015 at 3:17

Kaiido

140k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ThuyNguyen Over a year ago

Hi @Kaiido, I have a question, If in 0.1s the css file can not apply, the transitionend will not be firing. And I can not make sure time to load css file?

Kaiido Over a year ago

I think that transitions are calculated last, can't be sure though but I think it shouldn't occur, does it?

Tobias Beuving Over a year ago

Good one! There's a minor typo I wanted to correct ('transtionend' to 'transitionend') but I can't because it's a change of less than 6 chars.

Arun P Johny · Accepted Answer · 2015-08-19 02:56:31Z

2

You can use the load event

$('<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')

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

Another syntax

$('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')
}

edited Aug 19, 2015 at 2:56

answered Aug 19, 2015 at 2:50

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

ThuyNguyen Over a year ago

Thanks, but in this case it will be call onload() when sent request, but it not is load css completed

Collectives™ on Stack Overflow

jQuery Append CSS File and Wait until styles are applied without setInterval?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related