Jquery taking effect after the page is loaded
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 s开发者_C百科plit second the list is shown as it is and after that the Tabs effect takes place. I have written the javascript for calling the tabs in the same html file. How I can reduce the loading time and also the the abrupt view that is shown for a split sec.
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>
do
<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.
You can set your UL tag to display:none
@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 :)
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-tabswhich in combination with step2 will suppress the original list and puts the navigation already in place. - You add class
ui-widgetwhich fixes the font-size and the position of the first tab against navigation.
2) ul containing the nav items:
- You add class
ui-tabs-navwhich 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
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>tabs-1 content</p>
</div>
<div id="tabs-2">
<p>tabs-2 content</p>
</div>
<div id="tabs-3">
<p>tabs-3 content</p>
</div>
</div>
to:
<div id="tabs" class="ui-tabs ui-widget">
<ul class="ui-tabs-nav">
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>tabs-1 content</p>
</div>
<div id="tabs-2" style="display:none;"><!-- display:none is later reverted by jQuery.tabs -->
<p>tabs-2 content</p>
</div>
<div id="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:nonefromul) after tabs are rendered.
加载中,请稍侯......
精彩评论