在无限滚动中从 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 实现而不是 InfiniteScroll 库。

侦听 window 中的 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 加载图像

Load images from URL in infinite scroll

javascript

gallery

infinite-scroll

ecmascript-6