0

I am looking for GIPHY scroll exactly like how FaceBook allows in create post. Currently scrolling down to bottom only displays a total of 25 GIFs. That is ok based on GIPHY API limits, however, it should continue to scroll but it does not. Below is my code. I have tried using limit & offset parameters as described here.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="text" class="form-control input-field" placeholder="search for GIFs" onkeyup="Wo_GetPostStickers(0,this.value)">

<div id="imageWrapper"></div>

<script>
    jQuery(document).ready(function ($) {
        offset = 0;
        // initial value for offset
        offsetVal = 0;
        // set your limit
        giphyLimit = 25;
        // getGiphy(0);
        $('#imageWrapper').scroll(function () {
            if ($('#imageWrapper').scrollTop() == $('#imageWrapper').height() - $(window).height()) {
                getGiphy(offset);
            }
        });
    })

    var Wo_Delay = (function(){
      var timer = 0;
      return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
      };
    })();

    var Wo_ElementLoad = function(selector, callback){
        $(selector).each(function(){
            if (this.complete || $(this).height() > 0) {
                callback.apply(this);
            }
            else {
                $(this).on('load', function(){
                    callback.apply(this);
                });
            }
        });
    };


    function Wo_GetPostStickers(i, keyword){
        if (!keyword) {
            //return false;
        }
        if (i > 0){
            // increase the offset with item limit like 25, 50 to get the next items
            offsetVal = giphyLimit*i;
        }

        Wo_Delay(function(){
            $.ajax({
                url: 'https://api.giphy.com/v1/gifs/search?',
                type: 'GET',
                dataType: 'json',
                data: {q:keyword,api_key:'my_key', limit: giphyLimit, offset: offsetVal},
            })
            .done(function(data) {
                if (data.meta.status == 200 && data.data.length > 0) {
                    $('#imageWrapper').empty();
                    var appended = false;
                    for (var i = 0; i < data.data.length; i++) {
                        appended = true;
                        if (appended == true) {
                            appended = false;
                            $('#imageWrapper').append($('<img alt="gif" src="'+data.data[i].images.fixed_height_small.url+'" data-gif="' + data.data[i].images.fixed_height.url + '" autoplay loop>'));
                            appended = true;
                        }
                    }
                    // increase offset to get further items.
                    offset = offset+1;
                    var images = 0;
                    Wo_ElementLoad($('img[alt=gif]'), function(){
                        images++;
                    });
                    if (data.data.length == images || images >= 5) {
                        alert('data');
                    }
                } else{
                    $('#imageWrapper').html('<p class="no_gifs_found"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="frown" class="svg-inline--fa fa-frown fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-152c-44.4 0-86.2 19.6-114.8 53.8-5.7 6.8-4.8 16.9 2 22.5 6.8 5.7 16.9 4.8 22.5-2 22.4-26.8 55.3-42.2 90.2-42.2s67.8 15.4 90.2 42.2c5.3 6.4 15.4 8 22.5 2 6.8-5.7 7.7-15.8 2-22.5C334.2 339.6 292.4 320 248 320zm-80-80c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z"></path></svg> No result</p>');
                }
            })
            .fail(function() {
                console.log("error");
            })
        },100);
    }
</script>
4

1 回答 1

1

当滚动到达页面/div的底部时，您可以添加更多项目

这是您的 html，用于添加您将从 ajax 获得的内容

<div id="imageWrapper"></div>

这是jquery代码

    $(document).ready(() => {
        let offset = 0;
        // initial value for offset
        let offsetVal = 0;
        // set your limit
        let giphyLimit = 25;

        function getGiphy (i){
            // if offset is greater than one then fetch further items prior to previous ones
            if (i > 0){
                // increase the offset with item limit like 25, 50 to get the next items
                offsetVal = giphyLimit*i;
            }
            $.ajax({
                url: 'https://api.giphy.com/v1/gifs/search?',
                type: 'GET',
                dataType: 'json',
                data: {q:'keyword',api_key:'api_key', limit: giphyLimit, offset: offsetVal},
                success: (data) => {
                    $.each(data['data'], ( index, value) => {
                        let imageUrl = value['images']['original']['url'];
                        $("#imageWrapper").append("<img width='500' height='300' src='"+imageUrl+"' />");
                    })
                    // increase offset to get further items.
                    offset = offset+1;
                }
            })
        }
        getGiphy(0);
        $(window).scroll(() => {
            // when scroll reaches to bottom.
            if($(window).scrollTop() == $(document).height() - $(window).height()) {
                getGiphy(offset);
            }
        });
    })
于 2019-12-29T21:16:41.580 回答