当我们进入到某个页面的时候，会有许多的图片，有些图片可能在下面，当我们点进页面但没有滑动全部展示时，其实下面的图片是没有作用的，这个时候如果说加载了也相当于白加载，而且还降低了网页的加载速度。滚动加载就是不需要展示的图片可以先不展示，滚动到指定位置的时候再加载；今天跟大家分享二种方式，一是滚动条到底部时去加载对应的数据，二是使用懒加载；
实现效果图
一、怎么实现滚动条到底部时去加载？
实现原理以及代码展示：
1)先请求第一页的数据
$.ajax({
type:'get', //请求类型
url:'http://127.0.0.1:8088/ list?page =1', //接口文档
dataType:'json',//返回值类型
//data:data,
success:function(data){
$.each(data,function(index,item){ //index 索引 item 当前元素
$(".index-main ul").append('<li class="lists">'+
'<img src="'+item. img_url+'" width="150" height="150">'+
'<label>'+
'<b class="discount">'+item. uprice+'</b>'+
'<span class="price-text">'+item. price+'</span> '+
'</label> '+
'</li>')
});
},
error:function(error){
console.log(error)
}
});
2)当滚动条移至底部时触发请求下一页的数据
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var clientHeight = $(this).height(); //当前可视的页面高度
if(scrollTop + clientHeight >= scrollHeight){ //距离顶部+当前高度 >=页面总高度 即滚动条到达底部
//再请求对应的数据
});
这样就可以实现鼠标移至底部加载下一页的数据~~~
二、懒加载
1、为什么要使用懒加载
懒加载就是只有滚动到可视区域时才加载当前的图片，也就是说不是一次性加载所有的图片，从而在一程度减少服务端的请求及带宽；
2、懒加载的优点：
提高前端性能，图片在需要的时候才加载，减轻服务的负担，提高页面的加载速度，能够减少带宽
3、实现原理
图片的加载是由src的值引起的，当对src赋值时浏览器会请求图片资源，基于这个，可以利用html5的属性data-xxx来保存图片的路径，当我们需要加载图片的时候才将data-xxx的值赋予src，就能实现图片的按需加载，也就是懒加载了；
懒加载的方法有很多，这里推荐使用jquery图片延迟加载jquery.lazyload
1)使用方法
引用jquery和jquery.lazyload.js到你的页面
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.lazyload.js"></script>
2)html图片调用方法
为图片加入样式lazy 图片路径引用方法用data-original
1. 将图片路径写入data-original属性
<img data-original="img/1.jpg" />
2. 选择所有要lazyload的图片（img.lazy），执行lazyload();
$("img").lazyload();
3、常用方法设置
1）提前加载——Threshold
lazyload默认是当滚动到该图片位置时，加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xx px时就加载。
$("img.lazy").lazyload({
threshold :20
});
2）设定效果——Effects
插件默认的加载效果是 show() ,你可以使用任何你想要的效果。下面的代码使用了 fadeIn()
$("img.lazy").lazyload({
effect : "fadeIn"
});
4、当前实例的具体代码如下：
//按需加载
$.ajax({
type:'get', //请求类型get post put delete
url:'http://127.0.0.1:8088/ list’, //接口文档
dataType:'json',//返回值类型
//data:data,
success:function(data){
$.each(data,function(index,item){
$(".index-main ul").append('<li class="lists">'+
'<img data-original="'+item.product_img_url+'" width="150" height="150">'+
'<label>'+
'<b class="discount">'+item.product_uprice+'</b>'+
'<span class="price-text">'+item.product_price+'</span> '+
'</label> '+
'</li>')
});
//懒加载
$(".index-main ul img").lazyload({
effect:'fadeIn' //淡入效果
})
},
error:function(error){
console.log(error)
}
});
注：如果想添加加载动画
转发+关注我吧，每天更新web前端干货知识，原创需要大家的支持，你们的支持是我更新最大的动力！