【问题标题】:Infinte scroll / masonry 2nd set of images appearing behind first set无限卷轴/砖石第二组图像出现在第一组后面
【发布时间】:2013-02-19 12:10:41
【问题描述】:

我正在开发一个 wordpress 网站并尝试用砖石实现无限滚动。

有问题的页面在这里 - http://bc.somethingdoing.com/bristol-pubs-bars/?tag=pubs-2

当您向下滚动到页面底部以启动无限滚动时,您应该会看到新图像在旧图像后面加载。

目前有点问题,但不知道如何阻止现有图像后面的新图像加载

我正在使用的 Javascript(JQuery)(在 functions.php 中)在这里 -

 var infinite_scroll = {
                loading: {
                        img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
                        msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
                        finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
                },
                "nextSelector":"#nav-below  a",
                "navSelector":"#nav-below",
                "itemSelector":".post",
                "contentSelector":"#masonry-container",
        };
        jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll,// call Masonry as a callback
                function( newElements ) {
                        console.log(newElements);
                        var $newElems = jQuery( newElements ).css({ opacity: 0 });
                        // ensure that images load before adding to masonry layout
                                $newElems.imagesLoaded(function(){
                                console.log('imagesLoded');
                                // show elems now they're ready
                                $newElems.animate({ opacity: 1 });
                                jQuery('#masonry-container').masonry( 'appended', $newElems, true );
                                });
                }
        );

我不确定它是否只是损坏了 css、放错了库等。目前没有收到任何 Javascript 错误,一直在 chrome 和 FF 中查看该网站,没有任何乐趣。

希望这足以让您了解问题所在。

非常感谢任何帮助。

干杯

【问题讨论】:

    标签: jquery css wordpress jquery-masonry infinite-scroll


    【解决方案1】:

    砌体脚本出错,加载第二张图像时,砌体无法排列。所以图像不能放在旧的下面。它在砌体中的错误。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-08-26
      • 1970-01-01
      • 2012-08-01
      • 2023-03-22
      • 2021-07-05
      • 2021-09-19
      • 1970-01-01
      • 2017-08-10
      相关资源
      最近更新 更多