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

Posted zhangyuanqiang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了百度瀑布流图片动态加载实现相关的知识,希望对你有一定的参考价值。

参考链接: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);
                    }
                });
            }
        });
    });

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

技术分享图片

 

以上是关于百度瀑布流图片动态加载实现的主要内容,如果未能解决你的问题,请参考以下文章

JS实现动态瀑布流及放大切换图片效果(js案例)

flex实现瀑布流布局为啥不适合动态加载数据

Java jsoup爬取图片

瀑布流实现思路

简单实现加载图片的瀑布流效果

js实现瀑布流加载图片效果