JQuery实现无刷新下拉加载图片

最近作的一个项目须要作页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,而后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,本身写了一个,具体代码以下:html

 

JQuery写下拉触发ajax事件ajax

 $(window).scroll(function () {
            if($(window).scrollTop()==($(document).height()-$(window).height()))//判断右边滑动条是否滑到最下
            {
                $.ajax({
                    url:"",//后台地址
                    dataType:"json",
                    data:{},//附带参数,通常加上上一次请求的结尾ID或者其余标示
                     ......,
                    success:function(data){
                            $("#Album").append(data.result);//经过返回的结果对Album的Div进行添加数据

                    }
                })
            }
        })

这一过程基本原理以下,在页面首次加载的时候加载必定的图片,等到右边滑动条滑动到最下面的时候,触发ajax事件,进行与后台通讯,经过对后台请求获得json数据,其中包含了须要添加到页面的内容,经过append对页面原有的层进行追加内容(中间可能还涉及一些数据读取的问题,若是为了方即可以直接后台处理好返回一串html语句直接进行追加,但这样可扩展性小),从而实现这一效果。json

在实现过程当中还发现了另外一个问题:jq写的scroll事件容易屡次触发,即滚动一下鼠标触发屡次,对于这一个状况,思考了下主要有如下两种解决思路:app

1.添加计时器,在5-10秒内只容许触发一次()url

2.添加一个变量,让其在scroll刚开始执行时变为false,只有一次执行完才变回true,以此保证scroll每次只能有一个在执行。spa

相关文章
相关标签/搜索