JQuery|jquery懒加载使用方法
懒加载是网站性能优化的插件，可以提高用户体验。
页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。
1、引入jquery
2、引入jquery懒加载插件
【JQuery|jquery懒加载使用方法】 3、在需要懒加载的图片上添加如下：
";
src显示默认的图片
data-original为要显示的图片
4、启动懒加载
$("img.lazy").lazyload();
一般放在ajax complete中加载
如下代码：
$.ajax({
type: 'POST',
url: NET.getBisList,
dataType: 'json',
async: true,
data: {
'city': city,
'districtid': districtid,
'cont': cont,
'page': page,
'lon': lon,
'lat': lat,
'keywords': keywords,
'distance': distance
},
success: function(data) {
if (data.state == 0000) {
var str = "";
for (var i = 0;
i < data.msg.length;
i++) {
var obj = data.msg[i];
str += "";
str += " ";
str += "";
str += "";
str += " 
";
str += "";
str += "";
str += " " + obj.bisname + "";
str += "距您" + (obj.distance / 1000).toFixed(1) + "km";
str += " " + obj.address + "";
str += "";
str += " ";
str += " ";
}
$('#showshops').append(str);
$("#loadMore").html("点击加载更多");
} else {
//没有数据
$("#loadMore").html(data.msg);
$("#loadMore").unbind("click");
//移除click
}
},
complete: function() {
$("img.lazy").lazyload();
},
error: function(xhr, type) {}
});
推荐阅读
- 事件代理
- 无故.
- jQuery插件
- 二十一|二十一 - 草稿
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 老公的秘密
- 懒出来的癌症！
- 懒言懒语之神奇的泡泡
- 进阶任务十四
- 懒惰，只是你为自己找的借口