Fatal编程技术网
  • javascript/
  • Javascript Jquery在页面加载后生效

Javascript Jquery在页面加载后生效

javascript jquery-ui

Javascript Jquery在页面加载后生效,javascript,jquery-ui,Javascript,Jquery Ui,我正在使用jQueryUI。但是这个页面需要花费很多时间来加载。此外，我还使用标签功能对UL标签的锂元素。但在一瞬间，列表会按原样显示，然后会出现制表符效果。我已经编写了在同一个html文件中调用选项卡的javascript。如何缩短加载时间，以及缩短分秒显示的突然视图。您可以将UL标签设置为显示：无 关于加载时间，您可以使用Firefox安装Firebug，并查看加载时间 如果您使用PHP生成页面，还可以使用查看PHP在每个脚本文件中花费最多时间的位置 对于菜单，我想说的是，不要让JavaSc

我正在使用jQueryUI。但是这个页面需要花费很多时间来加载。此外，我还使用标签功能对UL标签的锂元素。但在一瞬间，列表会按原样显示，然后会出现制表符效果。我已经编写了在同一个html文件中调用选项卡的javascript。如何缩短加载时间，以及缩短分秒显示的突然视图。

您可以将UL标签设置为显示：无 关于加载时间，您可以使用Firefox安装Firebug，并查看加载时间

如果您使用PHP生成页面，还可以使用查看PHP在每个脚本文件中花费最多时间的位置

对于菜单，我想说的是，不要让JavaScript在DOM完全加载时启动以呈现选项卡效果。jQuery可以很容易地检测到这一点：）

如果您确实在使用load事件，那么您可能希望切换到

而不是做

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


$（文档）.load（事件处理程序）；
做


$（文档）.ready（eventHandler）；
或者干脆

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


$（事件处理程序）；
这是同一件事的捷径

这将在DOM准备好进行操作时触发，但在加载图像之前，通常在浏览器首次呈现页面之前触发，这取决于您如何构建页面。

Background: 您可以对
选项卡的加载进行一些优化
。但它基本上是为了易于使用而进行的折衷。您已经在html中添加了一些css类，不要等到jQuery为您添加这些类。这避免了jQuery接管时页面中所有有趣的移动，因为元素已经就位

解释步骤：
1） 
div
包含所有选项卡：


    

  • 您可以添加class
    ui选项卡
    ，该选项卡与步骤2结合使用，将抑制原始列表并将导航放置到位

  • 您可以添加class
    ui小部件
    ，该小部件固定字体大小和第一个选项卡相对于导航的位置
    • 


2） 
ul
包含导航项目：


    

  • 添加class
    ui选项卡nav
    ，完成列表的重新定位
    • 


3） 每个特定的
div
包含未激活的选项卡面板：


    

  • 您可以添加
    style=“display:none；”
    。这就是jQuery所做的。因此，您不必在选项卡准备就绪后删除样式。jQuery为您完成了这项工作。它也比粗糙地隐藏标签的所有内容更精细
    • 


4） 将选项卡构造函数调用置于文档就绪状态也是一个好主意：


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


结果:
所以您将html从




    

  • 

  • 

  • 


表1-1内容

表2-2内容

表3-3内容



至：


<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>





    

  • 

  • 

  • 


表1-1内容

表2-2内容

表3-3内容



结论:

    

  • 您只是在使用jQuery样式
    • 

  • 在jQuery开始渲染之前，导航选项卡和选项卡面板已经就位
    • 

  • 呈现选项卡后，无需进行任何清理（例如：从
    ul
    中删除
    display:none
    ）
    • 

也许您可以使用多个$（document）.load函数。或者可能是因为你的图像，你应该包括“惰性加载图像”。。。但如果没有榜样，真的很难说。也许您可以在JSFIDLE上添加示例？加载时间是服务器端（例如，大量处理数据库）还是客户端（向浏览器发送大量HTML）？关于
显示，请按照Adam的建议进行操作，先将其隐藏，然后在页面加载时显示它。它首先显示页面，没有jquery效果，然后发生jquery效果。加载jquery需要时间吗？页面加载后他会做什么？你应该再详细一点。

<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>



<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>