发表新帖
发表新帖

Jquery taking effect after the page is loaded

前端 未结
关注
4 421
轻奢々
轻奢々 2021-01-24 03:00

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

相关标签:
4条回答
  • 陌清茗
    2021-01-24 03:39

    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.

    0 讨论(0)
  • 囚心锁ツ
    2021-01-24 03:55

    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

    <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:none from ul) after tabs are rendered.
    0 讨论(0)
  • 一个人的身影
    2021-01-24 03:58

    You can set your UL tag to display:none

    0 讨论(0)
  • 不知归路
    2021-01-24 04:00

    @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 :)

    0 讨论(0)
 看不清?
提交回复
热议问题