选择后加载隐藏的标签图像答案

【问题标题】：load hidden tab image after select选择后加载隐藏的标签图像
【发布时间】：2012-12-03 07:25:19
【问题描述】：

我在主页中使用 idtabs js 制作标签。

http://www.sunsean.com/idTabs/

我在每个标签上放了 12 张图片。当页面加载第一次加载选项卡 div 和标题和菜单图像不首先加载。所以 4 分钟等待页面加载完成。

我想在加载页面中首先加载主图像，然后加载默认选项卡加载图像，当我在加载的选项卡上选择其他选项卡图像时？？？

<div id="tabs" dir="rtl">
<ul class="tabNavigation">
<li><a href="#topdownload" style="font:12px tahoma;">top</a></li>
  <li><a href="#featured" style="font:12px tahoma">more</a></li>
<li><a href="#toprated" style="font:12px tahoma">defult</a></li> 
<li><a href="#latest" style="font:12px tahoma;" >free</a></li>
</ul> 
</div>

【问题讨论】：

真的 4 分钟等待页面加载完成？？ 是不是太长了？？我宁愿建议您将负载时间减少到至少不到一分钟
如果你能回答我的问题，我可以这样做:)
我是否正确理解您希望在页面加载时将图像加载到主选项卡上，然后在显示时加载到其他选项卡上？
是的，当我在标签加载时单击其他标签图像时，我想要。
@behzadn：问题不太清楚，或许Google Translate能帮到你？

标签： php javascript jquery html tabs

【解决方案1】：

您使用的插件似乎非常基本，并且不允许 ajax 请求。

一种解决方案是对外部 html 文件（featured.htm、toprated.html...）使用加载方法，但 我确信有更好的方法使用 ajax 请求服务器和预加载插件。

HTML

<html>
  <head>
   ...
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
  </head>
  <body>
    ...
    <!-- tabs -->
    <ul class="css-tabs">
       <li><a href="topdownload.htm">top</a></li>
       <li><a href="featured.htm">more</a></li>
       <li><a class="selected" href="toprated.htm">default</a></li>
       <li><a href="latest.htm">free</a></li>
    </ul>

    <!-- single pane. it is always visible -->
    <div class="css-panes">
      <div style="display:block">
        <!-- loaded content here -->
      </div>
    </div>

jQuery

现在我们使用 ajax 加载外部页面，使用 load 方法获取链接元素的href：

<script>
    $(function() {
       $("ul.css-tabs").tabs("div.css-panes > div", {
            effect: 'fade',
            onBeforeClick: function(event, i) {
            // get the pane to be opened
            var pane = this.getPanes().eq(i);
                // only load once. remove the if ( ... ){ } clause if
                // you want the page to be loaded every time
            if (pane.is(":empty")) {
                // load it with a page specified in the tab's href
                // attribute
                pane.load(this.getTabs().eq(i).attr("href"));
            }
            }
        });
    });
</script>

演示

http://jquerytools.org/demos/tabs/ajax-noeffect.htm

【讨论】：

【解决方案2】：

您可以通过将图像动态分配给要按需下载的 img 标签的 src 属性来实现：

tabs = document.querySelector('#tabs a');
tabs[0].onclick = function(){anyImgTag.src = "images/someimage.jpeg"};

【讨论】：