以无限滚动方式从URL加载图像

Question

我正在尝试从API加载图像，并首先填充整个页面。当滚动时，我想发出更多的请求，并不断加载新的图像。

所以我尝试过：

var infiniteScroll = new InfiniteScroll( grid, {
path: 'https://api.giphy.com/v1/stickers/random/z8FVOIy1P7ZwgFXjuHmeZtuAFpBlRYJr',
append: '.grid__item',
status: '.page-load-status',
history: false,
loadOnScroll: true,
});

无限滚动会调用AJAX吗？我想使用普通的javascript/ES6。

Answer 1

您可以使用Vinilla javascript实现来代替InfiniteCroll库。

监听窗口中的scroll事件，并基于该事件从api加载图像。

我已经使用了取消滚动事件，因为它已经用垂直滚动触发了数千次。

var currentScrollPosition = window.scrollY;
var timeToWait = 1000; // No of millisecond to wait before call loadImages function.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
function loadImages(e){
if((currentScrollPosition + 500) < window.scrollY){
currentScrollPosition = window.scrollY;
console.log('dfdf');
// Do you image loading here
}
}
window.onscroll = debounce(loadImages,timeToWait);

jsFiddle演示-http://jsfiddle.net/vkxhnd8y/