Question

我正在将我的html原型迁移到WooCommerce，但是在页面加载后，您可以看到产品网格弹出然后在不久之后纠正自己 - http://sutsurikeru.com/ml

我的HTML版本：http://sutsurikeru.com/meeko - 没有加载问题

我的WooCommerce版本：http://sutsurikeru.com/ml - 由于WordPress注入了大量新的JS库，它们不是100％完全相同，而且我还加载了一些额外的JS引用和一些我选择使用的插件。

尝试查找自迁移到WooCommerce后我添加的内容是否已完成 - 我已禁用所有插件并在我的HTML原型中使用完全相同的jQuery，但我仍然遇到问题。

我对HTML原型上的同位素的呼唤

        var $container = $('.isotope');

        //isotope config
        $container.isotope({
            itemSelector: '.item',
            masonry: {
                columnWidth: '.grid-sizer',
                gutter: 10
            }
        });

        $container.imagesLoaded( function() {
          $container.isotope('layout');
        });

我的同位素呼叫WooCommerce（包括infinitescroll）

    var $container = $('.isotope');
        var $finishedMsg = '<span>No more dresses to display</span>';
        var $msgText = '<span>Getting more dresses...</span>';
        var $loadingImg = 'loading.gif';

        $container.imagesLoaded(function(){ 
            $container.isotope({
                itemSelector: '.item',
                //transformsEnabled: false,
                //animationEngine: 'css',
                masonry: {
                    columnWidth: '.grid-sizer',
                    gutter: 10
                }
            }); 
        });

        $container.infinitescroll({
              navSelector  : '#page-nav',    
              nextSelector : '#page-nav a', 
              itemSelector : '.item',
              loading: { finishedMsg: $finishedMsg, img: $loadingImg, msgText: $msgText }
          },
          function(newElements) {

            var $newElems = $(newElements).css({opacity: 0});

            $newElems.imagesLoaded(function(){

              $newElems.animate({opacity: 1});
              $container.isotope('appended', $newElems, true);                  

                WireEvents();

            });

          }
        );

我为两个网站编写了完全自定义的jQuery

JS来自sutsurikeru.com/ml - https://jsfiddle.net/mh6sc1jp/

来自sutsurikeru.com/meeko的JS - https://jsfiddle.net/x29xycqj/

它驱使我的破解者，我觉得我已经把所有选项都放到了导致问题滞后的问题上 - 我很可能错过了一些东西（直截了当我打赌！）但任何指导都会非常感谢！

Answer 1

在$（window）.load（function（）{}）中初始化同位素;不是$（文件）.ready（function（）{}}这将解决你的问题。

您的站点同位素在加载完成之前正在初始化并且是问题的原因。

在Woocommerce中，Isotope（负载滞后）一次

1 个答案: