Question

我正在使用大型弹出窗口显示图像，在该弹出窗口中，您可以选择将图像添加到弹出窗口中的购物车之前的各种版本。

这是宏伟的js的回调部分。在其中，我正在调用Woo添加到购物车变体js文件。每次加载图像时，我都必须调用此js文件，这样它才能正确显示woo变化。在页面上一次加载该文件不适用于弹出窗口。

type: "image",
            callbacks: {
                imageLoadComplete: function() {

                    jQuery.getScript("/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");

                },
             } .... etc

因此，每次单击以查看下一张照片时，都会加载add-to-cart-variation.min.js。有时该文件完全加载需要一些时间，因为它还有许多其他调用来运行其他php函数。如果您多次单击下一个箭头，那么真正出现问题的根源就是快速查看其他照片，这是因为每次单击下一步都会加载getScript文件，并且一段时间后它会冻结所有内容。

即使我在imageLoadComplete区域中添加woo js而不是使用getScript，我仍然有此问题，因此它不是getScript引起的问题，而是在加载js之后运行的其他功能。也不选择使用setimeout，因为无论如何它仍然可以运行。

如何阻止此问题的发生？

Answer 1

弄清楚了。至少在ios上也可以在移动设备上工作。

因此，我将禁用的类添加到按钮，以便为其赋予禁用的颜色。然后，当您将鼠标悬停在包含变体的div上时，我会加载woo脚本，然后将类移到悬停div上，这样就不会再发生包括woo脚本在内的悬停操作了。在Mac OS上的chrome，safari和firefox以及移动ios上的safari上都很好用。

type: "image",
     callbacks: {
        imageLoadComplete: function() {

         if(jQuery('.ft-gallery-variations-text').hasClass('ft-gallery-js-load')) {
            jQuery('.single_add_to_cart_button').addClass('disabled');
           }

         jQuery( ".ft-gallery-js-load" ).hover(function() {
            if(jQuery('.ft-gallery-variations-text').hasClass('ft-gallery-js-load')){
               jQuery.getScript("/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");
               jQuery('.ft-gallery-variations-text').removeClass('ft-gallery-js-load');
              }
         });

      },
   } .... etc

宏大的弹出窗口和Woo添加到购物车变化

1 个答案: