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();
})()

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

1 个答案: