wordpress サイトに取り組んでおり、石積みで無限スクロールを実装しようとしています。
問題のページはこちら - http://bc.somethingdoing.com/bristol-pubs-bars/?tag=pubs-2
ページの一番下までスクロールして無限スクロールを開始すると、新しい画像が古い画像の後ろに読み込まれているのがわかります。
現時点では少しバグがありますが、既存の画像の背後にある新しい画像の読み込みを停止する方法がわかりません
私が(functions.phpで)使用しているJavascript(JQuery)はこちらです-
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エラーは発生しておらず、クロムとFFでサイトを表示していて、喜びがありません。
何が間違っているかを確認するのに十分であることを願っています。
どんな助けでも大歓迎です。
乾杯