按需加载、懒加载
原理:
<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);
}
})
}