ajax、模板字符串、按需加载、懒加载

 按需加载、懒加载

原理:
<img data-src="1.jpg" />
二种方式:
jquery.lazyload.js 
滚动到一定高度后请求
$(window).height();
页面总高度
$(document).height();

$(window).scrollortop();

$(function(){
	$.ajax(function(){
		success:function(res){
			console.log(res);
			if(res.length>0){
				$.each(res,function(index,item){
					$(".index-main ul").append('<li>'+item.procuct_name+'</li><img src="images/loading.gif"  data-original="'+item.product_img+'"/>')
					///////////es 6  模板字符串  /////////////
					$(".index-main ul").append(`<li>${basket.onSale}</li>`)
				})
			}
			//懒加载
			$(".index-main ul img").lazyload({
				effect:'faceIn'//淡入效果
			})
		},
		error:function(error){
			console.log(error);
		}
	})
	imageList();
	$(window).scroll(function(){
		//滚动条与顶部的距离
		var scrollTop=$(this).scrollTop();
		//当前可视区域的高
		var h=$(this).height();
		//页面总高度
		var top=$(document).height();
		if(Math.ceil(scrollTop+h)>=top){//scrollTop+h+1>=top
			//滚动条已经到了最低部
			console.log('ok');
			
		}
	})	
})


function imageList(){
	$.ajax(function(){
		success:function(res){
			console.log(res);
			var data=res.slice(0,10);
			if(res.length>0){
				$.each(res,function(index,item){
					$(".index-main ul").append('<li>'+item.procuct_name+'</li><img src="images/loading.gif"  data-original="'+item.product_img+'"/>')
					///////////es 6  模板字符串  /////////////
					$(".index-main ul").append(`<li>${basket.onSale}</li>`)
				})
			}
			//懒加载
			$(".index-main ul img").lazyload({
				effect:'faceIn'//淡入效果
			})
		},
		error:function(error){
			console.log(error);
			
		}
	})
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值