jquery懒加载使用方法

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

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

1、引入jquery



2、引入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,javascript小技巧)