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 ?
2 answers
solution1
6 ACCPTED 2015-08-19 03:17:33
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/
solution2
1 2015-08-19 02:50:37
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')
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.