jquery实现简单瀑布流布局(续):图片懒加载

2016-12-05 08:27:32来源:cnblogs.com作者:葡萄美酒夜光杯人点击

第七城市

# 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('已加载')                       }                         }};

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


第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台