百度瀑布流图片动态加载实现

Posted 2020-11-14 zhangyuanqiang

参考链接：http://www.htmleaf.com/jQuery/pubuliuchajian/2014100330.html

最近在做图片管理系统的时候，由于开始的时候没考虑到用户的图片量，没有采取分页效果，当后来当图片量大的（测试的为5万张）时候，浏览器则会出现崩溃，导致解析响应很久，这对体验效果很是不好。

后来想到了分页，如果，用户想点击下一页，则需要点击触发一下，并且如果想返回上一页的话，还得重新请求，在浏览图片的时候，这种体验不是很好。

再后来又想到了通过页面点击【查看更多】，然后通过ajax动态加载新图片，虽然这个比分页稍许进步（如果查看上一页，则不会再次请求），但是还是需要用户点击才出发下一页，也不是很优秀。

最后就想到了瀑布流，延迟加载的方式。

刚开始搜了一大篇相关插件，特别是基于jquery的lazyload，但是还是不够优秀啊，这方法采用的是将所有图片加载到前端，只是不显示，然后在滚动条滚动到底部的时候才去请求图片文件，虽然效果差不多，但是还是将所有图片相关内容一次性的加载到了前端，5万张图片浏览器还是会崩溃的。

最后就想到了百度图片的瀑布流动态加载，问题最后得以最优解决。

下面是代码实现：

首先是相关的请求值的存放（设置在隐藏域中）：

    <!-- 存放瀑布流加载相关参数 -->
    <div class="none hide-pull-div">
        <!-- 当前页 -->
        <input type="hidden" value="1" class="h-page"/>
        <!-- 下一页是否请求完毕，正在请求中则不再进行请求 0：请求完毕，1-正在请求中 -->
        <input type="hidden" value="0" class="h-finsh"/>
        <!-- 是否达到最大页，如果达到最大页，则均不再请求 -->
        <input type="hidden" value="0" class="h-maxPage"/>
    </div>

然后最核心的JS代码：

    $(function(){
        // 图片列表所在div滚动事件
        $("div.pic-show-box").scroll(function(){
            var $this =$(this),
            viewH =$(this).height(), // 可见高度
            contentH =$(this).get(0).scrollHeight, // 内容高度
            scrollTop =$(this).scrollTop(); // 滚动高度
            if(scrollTop/(contentH -viewH)>=0.95) { // 大于滚动条95%时,加载新内容
                var pull = $(".hide-pull-div");
                // 判断是否已请求为最大页数，如果达到最大页数则不再请求
                if ($(pull).find(".h-maxPage").val() == 1) {
                    return;
                }
                // 判断上一次请求是否完成，如果未完成，则不再请求
                if ($(pull).find(".h-finsh").val() == 1) {
                    return;
                }
                // 请求前将请求状态设置为1（请求中）
                $(pull).find(".h-finsh").val(1);
                // 构建请求，动态获取数据
                var data = {
                    page : Number($(pull).find(".h-page").val()) + 1,
                }
                $.post("/pic/getPullPictures",data,function(rs){
                    for (var i = 0; i < rs.pictures.length; i++) {
                        // 这里加载新图片数据..(略)
                    }
                    $(pull).find(".h-page").val(pagerInfo.page);
                    $(pull).find(".h-finsh").val(0);
                    // 如果到达最大页码的时候，设置该值为1
                    if (rs.page >= rs.pageMax) {
                        $(pull).find(".h-maxPage").val(1);
                    }
                });
            }
        });
    });

给一下实现后的视图效果：