Question

我通过jQuery UI制作了一些Ajax标签。当我点击其中一个时，我看到一个预加载器，而它正在加载它链接的相应的php文件，当它完成后我可以看到新的内容。到目前为止一切都很好。

问题是相应的标签不会预加载其内容的图片。但我想要一些可以预加载整个内容（包括图像）的标签。

我看了somewhere您可以通过Ajax请求预加载图片，但不知道如何使用jQuery UI-Tabs进行图片处理。

那么如何在jQuery's UI-Tabs中实现额外的images-loader以预加载选项卡的整个内容（文本+图像）（通过Ajax）？

这是我的jQuery UI-Tabs的JS：

$(document).ready(function() {
    $('#home_tab').tabs({
      cache: true,

      beforeLoad: function(event, ui) {
        ui.ajaxSettings.type = 'POST';

        if ($(ui.panel).html()) {
          event.preventDefault();
        } else {
          ui.panel.html('<div class="tab_loader_home"></div>');
        }

        ui.jqXHR.success(function() { 
        });

        ui.jqXHR.error(function() {
        });
      }
    });
});

这些是我的标签：

<div id="home_tab">
<ul id="shadetabs" class="ui-tabs">
    <li class="tab"><a href="#new">New Games</a></li>
    <li class="tab"><a href="sections/ajax/popular.php">Popular Games</a></li>
    <li class="tab"><a href="sections/ajax/top_rated.php">Top Rated Games</a></li>
</ul>
<div class="panel_container">
    <div id="new">
        <?php
            include ('./includes/homepage/new_games.inc.php');
        ?>
    </div>
</div>
</div>

有关详细信息，请参阅此问题：Preload images for AJAX content using jQueryUI-tabs

如何通过Ajax（jQuery）预加载图像

0 个答案: