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);
			
		}
	})
}