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实现代替InfiniteScroll库。

收听窗口中的scroll事件，并根据该事件从api加载图像。

我使用了debounce滚动事件，因为它在垂直滚动中被触发了数千次。

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/

从URL无限滚动加载图像

1 个答案: