jquery实现简单瀑布流布局（续）：图片懒加载

jquery实现简单瀑布流布局（续）：图片懒加载

---

这篇文章是jquery实现简单瀑布流布局思想的小小扩展。代码基于前作的代码继续完善。

图片懒加载就是符合某些条件时才触发图片的加载。最常见的具体表现就是，当页面被请求时，只加载可视区域的图片，其它部分的图片只占位而不加载，只有这些图片出现在可视区域时才会动态加载。具体实现的技术并不复杂，下面分别对其说明。

技术路线

---

• 怎么加载。首先未加载的图片有一个占位假图片（一般是loading），按照真实图片的大小进行样式化。网上较为常用的思路是对图片元素的父级定义一个data-src属性，用来存放该图片元素的真实src。到用的时候再调用。
• 加载判断条件：
  
  首屏一次性加在20张。保证首页有料。
  
  后边的图片基于以下思路。

往下拉（滚动），找到第一个顶部进入可视区的img，优先加载。

• 监听位置：
• 滚动条滚动时，这提示需要写一个新加载的函数。
• 第二个有点难察觉，就是在getlist方法加载瀑布流完结之前。因为getList一旦调用，就意味着有新的图片进入可视区。不能只靠滚动进行触发

修改getList函数

function getList(n){
    $.getJSON(createUrl(n),function(data){
        if(data.length==0){
            return false;
        }else{
            for(var i=0;i<data.length;i++){
                var $html=null;
                if(i<=20&&n==1){//首屏一次加载20张
                    $html=$('<div><img src="'+data[i].preview+'"><p>'+data[i].title+'</p></div>');

                }else{
                    $html=$('<div><img src="images/1.jpg"><p>'+data[i].title+'</p></div>');
                    $html.find('img').css('opacity','0'); //占位图片不透明度为0
                } 

                $('li').eq(getShortestLi()).append($html);
                $html.attr('data-src',data[i].preview);
                $html.find('img').css('height',(data[i].height*225/data[i].width)+'px');
                $html.find('img').css('width','225px'); 

            };
        }

        bCheck=true;
    });
}

加载真实图片的执行函数

function loadClientPic(arr){//arr是页面所有的img标签。
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    for(var i=0;i<arr.length;i++){
        if(arr.eq(i).attr('src')=='images/1.jpg'){
            if(arr.eq(i).offset().top<document.documentElement.clientHeight+scrollTop){//进入可视区内！
                arr.eq(i).attr('src',arr.eq(i).parent().attr('data-src'));
                //console.log(i)
                //transition: 1s; opacity: 1
                if(arr.eq(i).attr('src')!=='images/1.jpg'&&arr.eq(i).height()!==0){
                    arr.eq(i).css('transition','1s').css('opacity','1');
                }

            }else{
                //console.log('不在可视区！')
            }
        }else{
            //console.log('已加载')
        }
    }
};

最后，在监听位置加上写好的函数

---

• 在$(window).scroll(function(){})里加上loadClientPic($('img));
• 不要遗漏getList方法结束前也执行loadClientPic。

附录

---

demo地址 http://djtao.top/ppl/ppl.html

全部代码:

//找出高度最小li的索引值
function getShortestLi(){
    var shortest=0;
    for(var i=1;i<4;i++){
        if($('li').eq(i).height()<$('li').eq(shortest).height()){
            shortest=i;
        }
    }
    return shortest;
}

function createUrl(num){
    return 'http://www.wookmark.com/api/json/popular?page='+num+'&callback=?';
}

var bCheck=false;
function getList(n){
    $.getJSON(createUrl(n),function(data){
        if(data.length==0){
            return false;
        }else{
            for(var i=0;i<data.length;i++){
                var $html=null;
                if(i<=20&&n==1){//首屏一次加载20张
                    $html=$('<div><img src="'+data[i].preview+'"><p>'+data[i].title+'</p></div>');

                }else{
                    $html=$('<div><img src="images/1.jpg"><p>'+data[i].title+'</p></div>');
                    $html.find('img').css('opacity','0'); //占位图片不透明度为0
                } 

                $('li').eq(getShortestLi()).append($html);
                $html.attr('data-src',data[i].preview);
                $html.find('img').css('height',(data[i].height*225/data[i].width)+'px');
                $html.find('img').css('width','225px'); 

            };
        }
        loadClientPic($('img'));//函数临结束执行判断
        bCheck=true;
    });
}

$(function(){
    var pageNum=1;
    getList(pageNum);
    $(window).scroll(function(){

        var $li=$('li').eq(getShortestLi());
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //console.log([$li.offset().top+$li.height(),document.documentElement.clientHeight+scrollTop])
        //如果li高度与li到页面顶部的高度之和<可视区高度+滚动距离
        if($li.offset().top+$li.height()<document.documentElement.clientHeight+scrollTop){
            if(bCheck){
                bCheck=false;
                pageNum++;

                //console.log(pageNum);
                getList(pageNum);
            }else{
                return false;
            }

        }

        loadClientPic($('img'));
    })
})

function loadClientPic(arr){
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    for(var i=0;i<arr.length;i++){
        if(arr.eq(i).attr('src')=='images/1.jpg'){
            if(arr.eq(i).offset().top<document.documentElement.clientHeight+scrollTop){//进入可视区内！
                arr.eq(i).attr('src',arr.eq(i).parent().attr('data-src'));
                //console.log(i)
                //transition: 1s; opacity: 1
                if(arr.eq(i).attr('src')!=='images/1.jpg'&&arr.eq(i).height()!==0){
                    arr.eq(i).css('transition','1s').css('opacity','1');
                }

            }else{
                //console.log('不在可视区！')
            }
        }else{
            //console.log('已加载')
        }
    }
};

看着那些图片，不由得再感叹一句，歪果仁太会玩了..