我正在使用InfiniteScroll插件(与Isotope和ImagesLoaded一起使用)将更多帖子加载到我的页面上,但是由于某些原因,“事件”似乎没有触发。
我正在将其作为ES6导出来执行,但是主要功能正常运行,因此无法理解为何request
之类的单个事件无法正常工作。
任何建议,不胜感激!
export function initArticlesGrid() {
// Setup
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var isotope = require('isotope-layout');
var infiniteScroll = require('infinite-scroll');
var imagesLoaded = require('imagesloaded');
// Init as jQuery plugin(s)
jQueryBridget( 'isotope', isotope, $ );
jQueryBridget( 'imagesLoaded', imagesLoaded, $ );
jQueryBridget( 'infiniteScroll', infiniteScroll, $ );
// Vars
var grid = $('#queried-articles');
var articles = grid.find('article');
var loadMoreBtn = $('#btn-load-more a');
// Init isotope
grid.isotope({
itemSelector: 'article',
layoutMode: 'fitRows',
transitionDuration: '300',
percentPosition: true,
hiddenStyle: { opacity: 0 },
visibleStyle: { opacity: 1 }
});
// Init infiniteScroll (only if enough articles and loadMoreBtn exists)
if( articles.length >= 3 && loadMoreBtn.length ) {
// Vars
var iso = grid.data('isotope'); // Get isotope instance
// Make imagesLoaded available for InfiniteScroll
infiniteScroll.imagesLoaded = imagesLoaded;
// Init infinite scroll
grid.infiniteScroll({
path: '#pagination #next a',
append: '#queried-articles article',
loadOnScroll: false,
scrollThreshold: false,
outlayer: iso,
button: '#btn-load-more',
hideNav: '#pagination',
debug: true,
history: false
});
/////// None of the following requests are firing
grid.on('request.infiniteScroll', function() {
console.log('loading');
loadMoreBtn.text('Loading');
});
// Return text to default
grid.on('load.infiniteScroll', function() {
console.log('load');
loadMoreBtn.text('Load More');
});
// Alert user that no more articles are availble
grid.on('last.infiniteScroll', function() {
console.log('last');
loadMoreBtn.text('No more articles');
});
}
}