关于ajax实现div的Lazyload

Posted 2020-10-26 全世界最帅的程序员

 

因为做的微信端的网页，所以在显示后台数据的时候，要么分页，要么全部加载数据，开始分页对于用户来说，其实体验不是很好，毕竟要去不断的点击下一页，但是如果我把全部数据读取出来的话，但用户可能也就看前面几条而已，那么就会造成性能的大大浪费。

所以我就上网找了ajax懒加载方面的内容，成功实现了，在用户滚动的时候判断是否到达页面底部，是的话就通过ajax请求数据，然后显示出来。

javascript代码

<script type="text/javascript">
$(function() {
    // 记录页数
    var $page = 1;
    // 懒加载
    var winH = $(window).height(); //页面可视区域高度
    $(window).scroll(function () { 
        var pageH = $(document.body).height(); 
        var scrollT = $(window).scrollTop(); //滚动条top 
        var aa = (pageH-winH-scrollT)/winH;
        if(aa<0.02){
            $page++;
            $.ajax({
                type : "get",
                url : "<c:url value=‘/getdata/" + $page + "‘ />",
                dataType : "json",
                success : function(data) {
                    if (data) {
                        $.each(data,function(index,array){ 
                            $comment += "<li><div id=\"index_list_user\">"; 
                            $comment += "       <div id=\"index_list_user_wx\">"; 
                            $comment += "       <img src=\"" + array[‘avatar‘]  + "\" >"; 
                            $comment += "       <span>" + array[‘author‘] + "</span>"; 
                            $comment += "       </div>"; 
                            $comment += "       <span id=\"index_list_user_bookName\">《" + array[‘book‘][‘title‘] + "》</span>"; 
                            $comment += "   </div>"; 
                            $comment += "   <div id=\"index_list_content\">"; 
                            $comment += "   <span>" + array[‘content‘] + "</span>";
                           $comment += "    </div>";
                           $comment += "    </li>";
                           $(".index_list").append($comment); // 把上面的html添加到要显示的标签上
                          }); 
                    }
                }
            });
        } 
      }); 
});
</script>

java代码

@RequestMapping(value = "/getdata/{page}", method = GET)
@ResponseBody
public List<Comment> indexPage(
        @PathVariable int page) {
            page--;
        page = page < 0 ? 0 : page;
        List<Comment> bookComments = rmbookCommentService.getToIndexByLimit(
                page*ReadMeetInitParameters.getCountPerPage(), ReadMeetInitParameters.getCountPerPage());

        return bookComments;
}

在Java代码上转换JSON的时候可能会有问题，我参考的解决方案：http://blog.csdn.net/kinginblue/article/details/51236938

参考地址：http://www.jb51.net/article/65073.htm

 

以上是关于关于ajax实现div的Lazyload的主要内容，如果未能解决你的问题，请参考以下文章

使用ajax后lazyload.js失败怎么办？

使用ajax后lazyload.js失败怎么办？

jquery.lazyload 懒加载失效，图片无法加载

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

jQuery高级Ajax

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解