# 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[i].title+'
'); }else{ $html=$(' 
'+data[i].title+'
'); $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 ## 最后，在监听位置加上写好的函数
- 在$(window).scroll(function(){})里加上loadClientPic($('img));
- 不要遗漏getList方法结束前也执行loadClientPic。
## 附录
demo地址
全部代码:
//找出高度最小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[i].title+'
'); }else{ $html=$(' '+data[i].title+'
'); $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到页面顶部的高度之和 看着那些图片，不由得再感叹一句，歪果仁太会玩了..