Загружать изображения с URL в бесконечной прокрутке - PullRequest
Новая
       9

Загружать изображения с URL в бесконечной прокрутке

0 голосов
/ 10 ноября 2018

Я пытаюсь загрузить изображения из 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.

1 Ответ

0 голосов
/ 10 ноября 2018

Вместо библиотеки InfiniteScroll вы можете использовать реализацию Vinilla javascript.

Прослушайте событие 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 demo - http://jsfiddle.net/vkxhnd8y/

...