How to reduce the lag time when using jquery to modify css onload_问答_开发者

How to reduce the lag time when using jquery to modify css onload

开发者 https://www.devze.com 2022-12-29 07:04 出处：网络

相关专题：jquery

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.