Question

我有四个标签，当每个标签被点击时会显示一个不同的图库（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');
}

每个标签都有一个名为＆＃34; .imgslide＆＃34;的img类。每次我点击一个标签时，标签变为活动状态（其他3个被隐藏），并显示它的图库（＆＃34; .customtabs＆＃34;）。我甚至不确定它是否是一种有效的方式。

我创建了另一个脚本以使用 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代码，所有图像都会加载到页面加载＆＃34;。我该如何防止这种情况？

Answer 1

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

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

到

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

.img不是代码中的类。

单击选项卡时，请勿加载隐藏的图像或加载内容

1 个答案: