Woocommerce 中的同位素（负载滞后）

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 上的同位素调用（包括无限滚动）

    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 我为两个网站都写过

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

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

这让我很生气，我觉得我已经用尽了所有选项来解决导致滞后问题的问题 - 我很可能错过了一些东西（我敢打赌是直接的东西！）但是任何指导将不胜感激！

Answer 1

在 $(window).load(function(){ }); 中初始化同位素不是 $(document).ready(function () { }} 这将解决您的问题。

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

Woocommerce 中的同位素（负载滞后）

Isotope (lagging on load) once in Woocommerce

wordpress

jquery

jquery-isotope

woocommerce