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

Question

Here is my website

我有四个选项卡，单击每个选项卡时都会显示不同的图库(Nextgen Pro 图库)。

它可以工作，但性能很糟糕，因为我目前加载了所有内容。我想将其更改为仅在单击选项卡时加载，这样我就不会一次加载最多 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 代码，所有图像也会在“页面加载”上加载。我怎样才能防止这种情况发生？

Answer 1

好像ajax没有触发。更改此代码。

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

到

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

.img 不是您代码中的类。