JQuery代码实现上拉加载（不使用插件）

<script type="text/javascript">
    $(window).scroll(function() {
        //已经滚动到上面的页面高度
        var sl_top = $(this).scrollTop();
        //页面高度
        var dm_Height = $(document).height();
        //浏览器窗口高度
        var wd_Height = $(this).height();
        //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
        if ($('#J_loadingData').css('display') == "none") {
            if (dm_Height == parseInt(sl_top + wd_Height)) {
                $('#J_loadingData').show();
                setTimeout(function() {
                    ajaxData();
                }, 3000)
            }
        }
    });
    //请求数据
    function ajaxData() {
        $.get('data/index.json', function(resp) {
            if (resp.code == 1) {
                $('#J_loadingData').hide();
                var liHTML = '';
                $.each(resp.data.commodityList, function() {
                    liHTML += '< a href=" ">' +
                        '<li>' +
                        '<div class="left-picture">' +
                        '< img src="' + this.commodityImg + '" />' +
                        '</div>' +
                        '<div class="right-info">' +
                        '<span class="commodity-title">' + this.commodityInfo + '</span>' +
                        '</div>' +
                        '</li>' +
                        '</ a>';
                })
                $('.commodity-list').append(liHTML);
            }
        })
    }
</script>

 

转载于:https://www.cnblogs.com/qhxblog/p/8466112.html