html图片滚动_滚动加载图片(懒加载)实现原理

当我们进入到某个页面的时候，会有许多的图片，有些图片可能在下面，当我们点进页面但没有滑动全部展示时，其实下面的图片是没有作用的，这个时候如果说加载了也相当于白加载，而且还降低了网页的加载速度。滚动加载就是不需要展示的图片可以先不展示，滚动到指定位置的时候再加载；今天跟大家分享二种方式，一是滚动条到底部时去加载对应的数据，二是使用懒加载；

实现效果图

一、怎么实现滚动条到底部时去加载？

实现原理以及代码展示：

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('

'+

''+

'