仅在选项卡处于活动状态时加载数据？答案

【问题标题】：Load Data only when tab is active?仅在选项卡处于活动状态时加载数据？
【发布时间】：2016-05-30 06:07:28
【问题描述】：

我将所有数据渲染到页面一次（在单个 url 'http://localhost:9111/sale/'上）。

并显示在该页面上的不同标签中。

<div class="tab-base">
             <!--Nav Tabs-->
             <ul class="nav nav-tabs">
                <li class="active">
                   <a data-toggle="tab" href="#demo-lft-tab-1">Daily Sale</a>
                </li>
                <li>
                   <a data-toggle="tab" href="#demo-lft-tab-2">Channel Wise Sale</a>
                </li>
                <li>
                   <a data-toggle="tab" href="#demo-lft-tab-3">Returns</a>
                </li>
               </ul>
            </div>
     <div class="tab-content">
<form method="POST" action="{% url 'sale' %}">
   {% csrf_token %}

   <div id="demo-lft-tab-1" class="tab-pane fade active in">
      <div class="panel-body">
         <table data-toggle="table">
            <thead >
               <tr>
                  <th data-align="center" data-sortable="true">Day</th>
                  <th data-align="center" data-sortable="true">Sale Value</th>
                  <th data-align="center" data-sortable="true">Quantity Sold</th>
               </tr>
            </thead>
            <tbody>
               {% for day, val, qty in sale_data %}
               <tr>
                  <td>{{day}}</td>
                  <td>{{val}}</td>
                  <td>{{qty}}</td>
               </tr>
               {% endfor %}
            </tbody>
         </table>
      </div>
   </div>



<div id="demo-lft-tab-2" class="tab-pane fade">
   <div class="panel-body">
      <table data-toggle="table" >
         <thead>
            <tr>
               <th data-align="center" data-sortable="true">Channel</th>
               <th data-align="center" data-sortable="true">Brand</th>
               <th data-align="center" data-sortable="true">Category</th>
               <th data-align="center" data-sortable="true">Selling Price</th>
               <th data-align="center" data-sortable="true">Quantity Sold</th>
               <th data-align="center" data-sortable="true">Percentage %</th>
            </tr>
         </thead>
         <tbody>
            {% for channel,brand,category,selling_price,quantity_sold, percentage in sal_data %}
            <tr>
               <td>{{channel}}</td>
               <td>{{brand}}</td>
               <td>{{category}}</td>
               <td>{{selling_price}}</td>
               <td>{{quantity_sold}}</td>
               <td>{{percentage}}%</td>
            </tr>
            {% endfor %}
         </tbody>
      </table>
   </div>
</div>

<!--   here is more code for other tab same as above  -->
<!--  -->


</form>


</div>

但是当渲染数据很大时，页面加载需要更多时间。

现在我想知道，如何仅为活动标签加载数据？

【问题讨论】：

您可以使用 ajax 调用通过在标签链接上放置点击监听器来加载活动标签。
@BasvanStein 我是前端新手，你能建议我任何链接或教程，让我得到我想要的东西吗？
我认为这是一个很好的开始：codexworld.com/…
@BasvanStein 但我不能使用 php
啊，好吧，但这并不重要，您可以使用任何您想要的服务器端语言。只要确保它返回正确的格式。

标签： javascript jquery html ajax django

【解决方案1】：

这是我的解决方案：

    $('#tab-nav > a').one('click', function() {
        // event.preventDefault();
        var target = $(this).attr('id');
        $("#" + target + "_content .filter_importance .menu div:last-of-type").trigger('click'); // here you can simplify by the use the `load` function instead of triggering a `click` event. 
    });

工作原理：

我将 SemanticUI 用于我的 CSS 框架，#tab-nav > a 以选项卡为目标。按照我的命名策略，在每个选项卡中我还添加了 ID 属性，例如id="firsttab"。
有内容的DIV都有ID属性，例如id="firsttab_content"。请注意如何使用target 变量定义目标元素：$("#" + target + "_content .filter_importance .menu div:last-of-type") 产生#firsttab_content。
在选项卡的内容中，我有使用 jQuery 的 load 函数加载数据的按钮。
上述解决方案点击其中一个按钮 - trigger('click')。

注意事项： 1.如果你使用one('click', function()，内容只会被加载一次。如果修改代码，使on('click', function()（注意e一个-->开启），每次点击tab都会加载内容。

如果您想将某个选项卡设置为默认选项并加载其中的内容，请将 `trigger('click') 放在里面

$("文档").ready(function() { });

您可以决定使用此代码预加载哪些内容：

$("document").ready(function() {

// loads content for tab open on page load
var hash = window.location.hash.substr(1); // gets the value of hash from URL
$("#" + hash + "_content .filter_importance .menu div:last-of-type").trigger('click'); // targets and clicks the button which loads data inside the tab content area.

});

请注意，您可能希望使用其他代码激活选项卡 - 我通过从后端的 URL 读取哈希来实现。通常通过向元素添加类active 来完成，在本例中为"#firsttab a"。

【讨论】：

【解决方案2】：

无论您使用任何后端语言或框架，浏览器都只能理解 HTML、CSS 和 JavaScript。看来您正在使用 Django Web 框架在 Python 中开发应用程序。

您可以按照以下方法来改善您的页面加载和最终用户体验，

仅显示最少和重要的数据 - 仅从服务器端呈现最少的信息，当页面加载时，用户的眼睛首先会看到它。
其他部分可以为空 - 当页面加载到浏览器中时，有一个占位符（即空标签页）来填充数据。
使用 Ajax - 在浏览器中加载页面后，调用 Ajax 来加载数据。
Loading ... - 同时您可以显示一些信息说“Loading ...”或动画图像来通知用户数据加载。
使用客户端 Javascript MVC 框架 - 您可以使用客户端 JavaScript MVC 框架（例如 Angular.js、Backbone.js、@）将大部分渲染任务移至客户端，而不是在服务器端渲染所有内容987654323@、React.js、Vue.js等
预聚合大型数据集 - 有时，首次加载预聚合数据会很好。当用户进一步点击时，您可以显示特定于用户兴趣的详细信息。
使用分页 - 如果您要在表格中显示数据，请仅使用分页方法检索和显示有限数量的行，例如 Google 搜索结果的显示方式
Google 的 - 让网络更快 - 最后，要加快和优化网络应用的性能，请遵循 Google's - Make the Web Faster 指南。

【讨论】：

【解决方案3】：

如果你使用的是Spring框架，那么使用分页概念。它将确保只需要获取所需的数据并且速度很快

【讨论】：