jquery懒加载使用方法

本文介绍了懒加载技术如何通过仅加载可视区域的图片来优化网站性能,显著提升用户体验。详细步骤包括引入jQuery和jQuery懒加载插件,为图片添加特定类和数据属性,并在AJAX请求完成后启用懒加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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中加载

如下代码:

$.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) {

		}
	});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值