javascript - 在无限滚动中从 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。

标签： javascriptecmascript-6galleryinfinite-scroll

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/