Question

如何处理jquery加载插件时出现的懒加载

Answer 1

懒加载是网站性能优化的插件，可以提高用户体验。

页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。

1、引入jquery

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js" ></script>

2、引入jquery懒加载插件

<script type="text/javascript" src="//cdn.bootcss.com/jquery.lazyload/1.9.1/jquery.lazyload.min.js"
></script>

3、在需要懒加载的图片上添加如下：

<img class='lazy' src='../images/i.png' data-original='" + obj.picurl + "' width='600' height='300' >";

src显示默认的图片

data-original为要显示的图片

4、启动懒加载

$("img.lazy").lazyload();

一般放在ajax complete中加载

如下代码：

[javascript] view plain copy print?
$.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 += "<li class='shop_det' onclick='openBusinessDet(" + obj.id + ")'>";
str += " <div>";
str += " <div class='shop_prof'>";
str += " <input type='hidden' name='id' id='B_id' value='" + obj.id + "'/>";
str += " <img class='lazy' src='../images/maititi.png' data-original='" + obj.picurl + "' width='600' height='300' onerror='loadImgError(" + obj.id + ")' id='img" + obj.id + "'>";
str += " </div>";
str += " <div class='info_det'>";
str += " <span class='name_det'>" + obj.bisname + "</span>";
str += " <span class='location'>距您" + (obj.distance / 1000).toFixed(1) + "km</span>";
str += " <span class='add_det'>" + obj.address + "</span>";
str += " </div>";
str += " </div>";
str += "</li>";
}
$('#showshops').append(str);
$("#loadMore").html("点击加载更多");
} else {
//没有数据
$("#loadMore").html(data.msg);
$("#loadMore").unbind("click"); //移除click
}
},
complete: function() {
$("img.lazy").lazyload();
},
error: function(xhr, type) {

}
});

Answer 2

懒加载是网站性能优化的插件，可以提高用户体验。
页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。
1、引入jquery
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js" ></script>
2、引入jquery懒加载插件
<script type="text/javascript" src="//cdn.bootcss.com/jquery.lazyload/1.9.1/jquery.lazyload.min.js"
></script>
3、在需要懒加载的图片上添加如下：
<img class='lazy' src='../images/i.png' data-original='" + obj.picurl + "' width='600' height='300' >";
src显示默认的图片
data-original为要显示的图片
4、启动懒加载
$("img.lazy").lazyload();
一般放在ajax complete中加载
如下代码：
[javascript] view plain copy print?
$.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 += "<li class='shop_det' onclick='openBusinessDet(" + obj.id + ")'>";
str += " <div>";
str += " <div class='shop_prof'>";
str += " <input type='hidden' name='id' id='B_id' value='" + obj.id + "'/>";
str += " <img class='lazy' src='../images/maititi.png' data-original='" + obj.picurl + "' width='600' height='300' onerror='loadImgError(" + obj.id + ")' id='img" + obj.id + "'>";
str += " </div>";
str += " <div class='info_det'>";
str += " <span class='name_det'>" + obj.bisname + "</span>";
str += " <span class='location'>距您" + (obj.distance / 1000).toFixed(1) + "km</span>";
str += " <span class='add_det'>" + obj.address + "</span>";
str += " </div>";
str += " </div>";
str += "</li>";
}
$('#showshops').append(str);
$("#loadMore").html("点击加载更多");
} else {
//没有数据
$("#loadMore").html(data.msg);
$("#loadMore").unbind("click"); //移除click
}
},
complete: function() {
$("img.lazy").lazyload();
},
error: function(xhr, type) {

}
});