How to reduce the lag time when using jquery to modify css onload
I have a jquery function that is called on $(document).ready that modifies the css of a Business Intelligence dashboard. I had to use jquery to make the adjustments because I do not have access to the source code of the BI tool. What happens is when the page loads, I run through the tab navigation and change the colors of the tabs based on cert开发者_如何学Goain requirements (which is basically dependent on the text of the tab). The issue I am facing is that there is a small lag time from when the page initially loads to when the jquery updates have been made to the page. Is there a way to reduce this lag time?
Similar to Eric's answer, I would hide the part of your page that shows the BI tool, or the whole body if you like (perhaps replaced with a 'Loading...' type message) Then, as the last line of your $(document).ready() code make the container visible again and remove the 'Loading...' message.
Here's a what I'm thinking:
<html>
<body>
<div id='BIContainer' style='display:none;'>
<!-- BI TOOL OUTPUT GOES HERE -->
</div>
<!-- I'm assuming jQuery has already been loaded -->
<script>
$(document).ready(function() {
// Your code to change the tab styles
$('#BIContainer').show();
});
</script>
</body>
You could make the transition neater by hiding the containing div, applying your CSS changes, and then artistically fading the modified dashboard div in.
i assume you use .css() to modify your style?
Make custom classes in a seperate CSS file you crate, then just addClass() its much faster. If you cant to that, i would suggest you use Eric's solution.
加载中,请稍侯......
精彩评论