Jquery Taking Effect After The Page Is Loaded

March 31, 2024 Post a Comment

I am using jquery ui. But the page is taking a lot of time to load. Also I am using tabs function for on LI elements of UL tag. But for a split second the list is shown as it is an

Solution 1:

If you are truely using the load event, then you probably want to switch to the domReady event.

instead of doing

<head><script>
    $(document).load(eventHandler);
</script></head>

<head><script>
    $(document).ready(eventHandler);
</script></head>

or simply

<head><script>
    $(eventHandler);
</script></head>

which is a shortcut for the same thing

This will trigger as soon as the DOM is ready to be manipulated, but before images are loaded, and generally before the browser renders the page for the first time, tho that depends on how your have built your page.

Solution 2:

You can set your UL tag to display:none

Solution 3:

@dilip For loading times you can install Firebug with Firefox and see where the loading times go.

If you are using PHP to generate your page, you can also use http://www.xdebug.org/ to see where PHP takes the most time per script file.

For the menu I would say, do not let the JavaScript kick in to render the Tabs effect when the DOM has fully loaded. jQuery can detect that easily :)

Solution 4:

Background:

There are a few little optimization you can do for smoother loading of the tabs. But it's basically trade-off to easy-to use. You add some css classes into your html already and don't wait till jQuery puts it for you. This avoids all the funny movements in the page when jQuery takes over, coz the elements will be already in place.

Explained steps:

1) div containing all the tabs:

You add class ui-tabs which in combination with step2 will suppress the original list and puts the navigation already in place.
You add class ui-widget which fixes the font-size and the position of the first tab against navigation.

2) ul containing the nav items:

You add class ui-tabs-nav which completes the list repositioning.

3) Each particular div containing tab panel, which is not active:

You add style="display:none;". This is what jQuery does anyway. So you don't have to remove style after the tabs are ready. jQuery does it for you. It also more fine-tuned than crudely hiding all content of tabs.

4) Is also good idea to put tabs constructor call in document ready:

$(document).ready(function(){$( "#tabs" ).tabs();}

Result:

So you change your html from original

<divid="tabs"><ul><li><ahref="#tabs-1">Nunc tincidunt</a></li><li><ahref="#tabs-2">Proin dolor</a></li><li><ahref="#tabs-3">Aenean lacinia</a></li></ul><divid="tabs-1"><p>tabs-1 content</p></div><divid="tabs-2"><p>tabs-2 content</p></div><divid="tabs-3"><p>tabs-3 content</p></div></div>

to:

<divid="tabs"class="ui-tabs ui-widget"><ulclass="ui-tabs-nav"><li><ahref="#tabs-1">Nunc tincidunt</a></li><li><ahref="#tabs-2">Proin dolor</a></li><li><ahref="#tabs-3">Aenean lacinia</a></li></ul><divid="tabs-1"><p>tabs-1 content</p></div><divid="tabs-2"style="display:none;"><!-- display:none is later reverted by jQuery.tabs --><p>tabs-2 content</p></div><divid="tabs-3"style="display:none;"><p>tabs-3 content</p></div></div>

Conclusion:

You are just using jQuery styles.
You tabs navigation and tab panels are already in place before jQuery starts rendering.
No need any clean-up (E.g.: remove display:none from ul) after tabs are rendered.

JavaScript Square