单击选项卡时不要加载隐藏的图像或加载内容

Question

Here is my website

我有四个选项卡，点击每个选项卡都会显示不同的画廊（Nextgen Pro 画廊）。

它可以工作，但性能很糟糕，因为我目前正在加载所有内容。我想将其更改为仅在单击选项卡时加载，这样我一次只加载 50 张图片，而不是一次加载多达 200 张图片。

目前我实现这个标签和显示功能的脚本如下（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 代码，所有图像也会在“页面加载”时加载。我怎样才能防止这种情况发生？

Answer 1

似乎没有触发 ajax。更改此代码。

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

到

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

.img 不是您代码中的类。