当我们进入到某个页面的时候，会有许多的图片，有些图片可能在下面，当我们点进页面但没有滑动全部展示时，其实下面的图片是没有作用的，这个时候如果说加载了也相当于白加载，而且还降低了网页的加载速度。滚动加载就是不需要展示的图片可以先不展示，滚动到指定位置的时候再加载；今天跟大家分享二种方式，一是滚动条到底部时去加载对应的数据，二是使用懒加载； 实现效果图 一、怎么实现滚动条到底部时去加载？ 实现原理以及代码展示： 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前端干货知识，原创需要大家的支持，你们的支持是我更新最大的动力！
