我在一个 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 浏览网站,没有任何乐趣。
希望这足以看出什么是错的。
非常感谢任何帮助。
干杯