不要裝入隱藏的圖像或標籤被點擊

我有四個標籤時，加載的內容，當每一個被點擊最多可顯示不同的畫廊（NextGen的專業畫廊）。

它的工作原理，但性能是可怕的，因爲我目前正在加載所有東西。我想將其更改爲僅在單擊某個選項卡時加載，而不是一次加載多達200個圖像，我一次只能加載50個圖像。

目前我的腳本實現這個標籤和顯示功能如下（JavaScript）;

jQuery(document).ready(function() { 
     if (jQuery('.customtabs > br').length) { 
      jQuery('.customtabs > br').remove(); 
     } 
}); 

function displaycustom_tab(obj) { 
     var totalSlides = jQuery(obj).parent().find('>div').length/3; 
     var tabi = 0; 
     var slidei = jQuery(obj).index() + 1; 
     if (slidei > (2 * totalSlides)) { 
      tabi = slidei - (2 * totalSlides); 
     } else if (slidei > (totalSlides)) { 
      tabi = slidei - totalSlides; 
     } else { 
      tabi = slidei; 
     } 
     tabi--; 
     jQuery('.customtabs > div').removeClass('activetab'); 
     jQuery('.customtabs > div:eq(' + tabi + ')').addClass('activetab'); 
    jQuery(window).trigger('resize'); 
}

每個標籤都有一個名爲「.imgslide」和我點擊一個，每次一個img類，標籤被激活（其他3被隱藏），它的畫廊（「.customtabs」）顯示。我甚至不確定這是否是一種有效的方式。

我創建了一個腳本繼續使用AJAX：

jQuery(document).on('click', '.img.imgslide', function(event) { 
    console.log("ajax call worked"); 
    event.preventDefault(); 
    jQuery.ajax({ 
     url: loadgallery.ajaxurl, 
     type: 'post', 
     data: { 
      action: 'load_gallery' 
     }, 
     success: function(result) { 
      alert(result); 
     } 
    }) 
})

什麼也沒有發生，包括的console.log。

我已閱讀這些帖子，但我不知道如何去做任何一個。

https://stackoverflow.com/questions/502391 https://stackoverflow.com/questions/3818063

我得到的代碼源從該WordPress教程;

https://premium.wpmudev.org/blog/load-posts-ajax

我感謝所有幫助我能。

編輯1

我想我之後的功能類似於this。

編輯2

謝謝@Vel的指出語法問題。腳本加載 - 但我不確定它做了什麼。

我可以看到這是很...數據重，除非我可以實現的方式每個標籤使用Ajax代碼一次。

即使使用AJAX代碼，所有圖像都會在「頁面加載」上加載。我怎樣才能防止這一點？

來源

2016-12-18 Richard Monjed

唯一的問題是你想加載的圖像點播的權利？那只是當選項卡處於活動狀態時......您是否還使用引導選項卡？ –

嗨@RajshekarReddy，這是正確的。我希望圖像按需加載。我在這裏讀到一個問題，當圖像的src被換出並在點擊標籤時放回原位 –

我訪問了你的網站和男人有wayyy太多的圖像正在加載..它需要幾乎6 - 7秒僅適用於圖像。另外，我覺得你的代碼有點困難，並且建議你修復一些問題，而不是做一個小小的提琴，你可以看一看，並得到關於如何按需加載的一般想法。 https://jsfiddle.net/RajReddy/ka1m1t6n/3/看看這個，讓我知道如果這有幫助.. –

似乎ajax沒有觸發。更改此代碼。

jQuery(document).on('click', '.img.imgslide', function(event) {

到

jQuery(document).on('click', 'img.imgslide', function(event) {

.IMG是不是在你的代碼的類。

來源

2016-12-18 12:24:28 vel

我不能相信這是一個語法錯誤哈哈。非常感謝！雖然頁面仍然會加載所有圖像，即使點擊該選項卡可以重新加載它們。有沒有辦法讓圖像只經過一次使用ajax的加載過程，並且在加載頁面時不加載圖像（除了標籤圖像）？ –

請勿在頁面加載時加載圖像。在頁面加載時爲空。你可以發佈load_gallary函數代碼嗎？ – vel

錯誤控制檯。 Uncaught TypeError：無法讀取未定義的屬性'click' – vel

不要裝入隱藏的圖像或標籤被點擊

回答

相關問題