加载选项卡的内容以缩短页面加载答案

【问题标题】：Load content of the tabs to shorten the page loading加载选项卡的内容以缩短页面加载
【发布时间】：2015-12-21 14:11:47
【问题描述】：

我正在使用 jQuery UI 选项卡使用 JS 和 jQuery 在每个选项卡中嵌入不同的社交小部件。我试图重建脚本以缩短页面加载时间，因为目前 jQuery UI 选项卡正在页面开始时从所有选项卡加载所有外部 JS 文件。我想在点击时加载活动标签的内容。

这可能吗？

JSFIDDLE

$(document).ready(function() {

  //When page loads...
  $(".tab-content").hide(); //Hide all content
  $(".tabs tab-links a:first").addClass("active").show(); //Activate first tab
  $(".tabs .tab-content:first").show(); //Show first tab content

  //On Click Event
  $(".tabs .tab-links a").click(function() {

    $(".tabs .tab-content .tab").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tabs .tab-content .tab").hide(); //Hide all tab content

    var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content

    if ($(activeTab).html() == '') {
      $.ajax({
        url: '/url/to/post',
        type: 'post',
        dataType: 'html',
        success: function(content) {
          $(activeTab).html(content);
        }
      });
    }

    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
  });

});

【问题讨论】：

标签： jquery ajax jquery-ui

【解决方案1】：

这对我有用。尽可能简单。它使用选项卡编号和相关的 div id 来确定要加载的文件以及它进入的 div。

我为每个部分创建了 3 个内容 html 文件，分别调用 fragment0.html、fragment1.hml 和 fragment2.html。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <link href="Scripts/jquery-ui.css" type="text/css" rel="stylesheet" />
        <link href="Scripts/jquery-ui.theme.css" type="text/css" rel="stylesheet" />
        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
        <script src="Scripts/Knockout.js" type="text/javascript"></script>
        <script type="text/javascript">

            $(document).ready(function () {
                $("#tabs").tabs({
                    activate: function (t, b) {
                        var newId = b.newPanel[0].id;
                        if($("#" + newId).children().length == 0){
                            doAjax(newId);
                        }
                    }
                });
                doAjax("fragment0");
            });

            function doAjax(pageName) {
                $.ajax({
                    url:pageName + ".html",
                    error: function () {
                        $('#info').html('<p>An error has occurred</p>');
                    },
                    dataType: 'html',
                    success: function (data, rq) {
                        var d = $("#tabs").tabs("option", "active");
                        $("#fragment" + d).html(data);
                    },
                    type: 'GET'
                });
            }
        </script>
    </head>
        <body>
            <div id="info"></div>
            <div id="tabs">
                <ul>
                    <li><a href="#fragment0"><span>One</span></a></li>
                    <li><a href="#fragment1"><span>Two</span></a></li>
                    <li><a href="#fragment2"><span>Three</span></a></li>
                </ul>
                <div id="fragment0"></div>
                <div id="fragment1"></div>
                <div id="fragment2"></div>
            </div>
        </body>
    </html>

【讨论】：

【解决方案2】：

你可能想要这样的东西......

$(document).ready(function() {

$( ".selector" ).tabs({

  activate: function( event, ui ) {
    // put code here to see if tab is loaded if not, load it.
  }

});
// then add code here to load the first tab.




});

【讨论】：

如果你今天晚些时候仍然卡在我下班回家的时候，我可以草拟一个更好的答复。