javascript - Ajax无限滚动图库多次添加相同的图像

Question

我正在尝试创建一个简单的画廊页面，当您到达底部时，它会添加元素，我正在使用 Django 从后端渲染 html 片段，并尝试使用 javascript 将其附加到我的页面。

出于某种原因，当我滚动时，我经常看到相同的图片多次出现。

我的做法有问题吗？我一生都无法弄清楚。

(function(){
    var Gallery = {
        page: 1,
        init: function(){
            this.bindScrollEvent();
            this.cacheDOM();
        },
        cacheDOM: function(){
            this.$image_ul = $('ul.photos')
        },
        bindScrollEvent: function(){
            $(document).on('scroll', function(){
                if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                    this.getImages();
                }
            }.bind(this));     
        },
        appendImages: function(html){
            this.$image_ul.append(html);
            this.page+=1;
        },
        getImages: function(){
            $.ajax({
                url : "/images/",
                type : "POST",
                data : {'query':'','page':this.page}, 

                success : function(html) {
                    console.log("success");
                    this.appendImages(html)
                }.bind(this),

                error : function(xhr,errmsg,err) {
                    console.log("error");
                }.bind(this)
            });
        }

    };
    Gallery.init();
})()

Answer 1

您的问题是仅在收到响应时才增加页面。这意味着，在您收到响应之前，如果您向下滚动得足够快，请求将以仍然相同的分页触发。所以简单地重写画廊类如下:

(function(){
var Gallery = {
    page: 0,
    init: function(){
        this.bindScrollEvent();
        this.cacheDOM();
    },
    cacheDOM: function(){
        this.$image_ul = $('ul.photos')
    },
    bindScrollEvent: function(){
        $(document).on('scroll', function(){
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                this.getImages();
            }
        }.bind(this));     
    },
    incrementPage: function(html){
        this.page +=1;
    },
    appendImages: function(html){
        this.$image_ul.append(html);
    },
    getImages: function(){

        this.incrementPage();

        $.ajax({
            url : "/images/",
            type : "POST",
            data : {'query':'','page':this.page}, 

            success : function(html) {
                console.log("success");
                this.appendImages(html)
            }.bind(this),

            error : function(xhr,errmsg,err) {
                console.log("error");
            }.bind(this)
        });
    }

};
Gallery.init();
})()