0

通过使用jQuery ui 选项卡，我有 3 个选项卡，一开始只能查看一个选项卡。这就是为什么我认为大多数访问者不会打扰并打开其他两个标签。所以我的问题是，如何防止浏览器仅加载图像？并且仅在单击其特定选项卡时才加载它们。

4

3 回答 3

3

jQuery UI 允许你为你的标签使用 URL，它们的内容只会在点击时被加载。查看文档

于 2013-03-03T18:06:53.430 回答
1

你有两个选择来实现你的目标。

  1. 在您的选项卡中设置 url 并将内容放到其他页面。然后，当用户单击选项卡时，jQuery UI 将通过 ajax 加载内容。请参阅jQuery UI ajax 文档。
  2. 您可以使用一些技巧来加载图像。诀窍是在面板处于活动状态时设置图像 src。一开始，将src作为presrc属性，当标签页激活时，复制presrc并将其设置为src。

jsFiddle 上的代码示例：http: //jsfiddle.net/4WYCC/1/

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <p>Test tab</p>
    </div>
    <div id="tabs-2">
        <img presrc="https://www.google.com.hk/logos/2013/miriam_makebas_81st_birthday-1417005-hp.jpg" />
    </div>
</div>

JavaScript

$(function() {
  $( "#tabs" ).tabs({
      beforeActivate: function( event, ui ) {
          $("img",ui.newPanel).each(function(){
              if(!this.src)
              {
                  this.src = $(this).attr("presrc");
              }
          });
      }
  });
});

虽然第二选择的诀窍是工作，但我会建议使用第一选择。

于 2013-03-03T18:32:01.927 回答
1

这个答案提供了@user1737909 解决方案的替代方案。正如所提到的，只有在按下选项卡时才能创建和检索包含选项卡内容的新 HTML 页面。创建新页面的替代方法如下：

与 tab2 关联的 HTML：

  <div id="tabs-2">
     <img id="img2" src="" alt="image description" />
  </div>

jQuery：

$('#tabs').bind('tabsselect', function (event, ui) {
  switch (ui.index) { //index=1 is tab-2
    case 1:
       $("#img2").attr("src","link2image2");
    case 2:
       $("#img3").attr("src","link2image3");
  ...
  }

});

高温高压

于 2013-03-03T18:40:43.923 回答