图片滚动代码怎么实现，html图片滚动代码-励北网

图片滚动代码怎么实现，html图片滚动代码

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

实现效果图

图片滚动代码怎么实现，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('<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到你的页面

2)html图片调用方法

为图片加入样式lazy 图片路径引用方法用data-original

1. 将图片路径写入data-original属性

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