0

I have some Ajax-tabs that I made via jQuery UI. When I click on one of them I see a preloader while it's loading it's linked appropriate php-file and when it's done I can see the new content. So far so good.

The problem is that the appropriate tab doesn't preload its content's images. But I want some tabs that can preload their whole content (including images).

I read somewhere that you can preload images through an Ajax-request but don't know how to do it with jQuery UI-Tabs.

So how do you implement an additional images-loader into jQuery's UI-Tabs in order to preload the whole content (text + images) of a tab (via Ajax)?

This is my JS for my jQuery UI-Tabs:

$(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() {
        });
      }
    });
});

These are my tabs:

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

See this question for more info: Preload images for AJAX content using jQueryUI-tabs

Community
  • 1
  • 1
drpelz
  • 811
  • 11
  • 43
  • I'm not sure I understand what you mean by "preloading." Do you want the content on the tab before the person actually views the tab? Or...something else? Can you clarify? – JasCav May 24 '14 at 04:05
  • When I click on a tab it loads its contents via Ajax. But it does not load the contents images. I want to load the images through Ajax also (when I click on the appropriate tab). I updated my question. – drpelz May 25 '14 at 14:28

0 Answers0