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('已加载')
}
}
};
看着那些图片，不由得再感叹一句，歪果仁太会玩了..
posted on
