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

Question

这是我的网站

我有四个选项卡，单击每个选项卡将显示一个不同的画廊（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类，每当我单击一个时，该选项卡就会变为活动状态（其他三个都处于隐藏状态）并显示图库（“ .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

我想我追求的功能与此类似。

编辑2

感谢@Vel指出语法问题。 该脚本已加载-但我不确定它会执行任何操作。

我可以看到这非常...数据繁重，除非我可以为每个选项卡实现一次使用ajax代码的方式。

即使使用AJAX代码，所有图像也会在“页面加载”中加载。 我该如何预防？

Answer 1

似乎ajax不会触发。 更改此代码。

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

至

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

.img不是您的代码中的类。