如何不在html內容中預加載圖像

我有3個標籤，通過使用jQuery ui tabs只有一個標籤可以在開始時查看。這就是爲什麼我認爲大多數訪問者不會打擾並打開其他兩個選項卡。所以我的問題是，你如何防止瀏覽器只加載圖像？並只在點擊特定標籤時加載它們。如何不在html內容中預加載圖像

來源

2013-03-03 shnisaka

剛剛創建的選項卡中的「點擊」事件，只點擊事件觸發時設置「src」屬性。 – 2013-03-03 18:08:02

@rontornambe你有沒有演示如何做到這一點？ – shnisaka 2013-03-03 18:09:17

發佈html和jQuery – Jai 2013-03-03 18:11:01

您有兩個選擇來完成您的目標。

在您的選項卡中設置網址，並將內容放到其他頁面。然後jQuery UI將在用戶單擊選項卡時通過ajax加載內容。見jQuery UI ajax doc。
你可以使用一些技巧來加載你的圖像。技巧是在面板激活時將圖像設置爲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-03 18:32:01 Derek

jQuery UI允許您爲選項卡使用URL，它們的內容僅在點擊時加載。請參閱docs

來源

2013-03-03 18:06:53 Ven

此答案提供了@ user1737909解決方案的替代方案。正如所提到的，只有在按下該選項卡時，才能創建和檢索包含選項卡內容的新HTML頁面。創造了新的一頁替代如下：

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

jQuery的：與TAB2相關

HTML

$('#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"); 
    ... 
    } 

});

HTH

來源

2013-03-03 18:40:43

如何不在html內容中預加載圖像

回答

相關問題