前端笔记五图片动态获取和懒加载

图片动态获取

1.默认展示出合适数量的图片。

2.滚动到达底部后，ajax获取图片并展示。

var page=1;

imgList(page);

//在body上判断是否到底部

$(window).scroll(function(){

　　var scrollHeigth = $(this).scrollTop(); //已滚动的距离

　　var containerHeight = $(this).height(); //容器的高度

　　var contentHeight = $(document).height(); //文档内容的总高度，当在div或者容器中设置滚动条时，这个高度为$(this)[0].scrollTop

　　if(containerHeight + scrollHeigth >= contentHeight){

　　　　console.log("滚动到底部了！");

　　　　imgList(++page)

　　}

});

function imgList(page){

　　//从后端获取图片

}

 

图片懒加载

1.从后台获取图片地址列表

2.自定义属性存放图片地址

3.下拉到底部时，将图片地址赋值给src。

使用 jquery.lazyload.js 插件来实现。

function imgList(page){

//调用jquery的ajax方法获取图片

$.ajax({

　　url:"***",

　　type:"get",

　　async:true,

　　dataType:"json",

　　success:function(response){

　　　　if(response.status){

　　　　　　console.log(response.result)

　　　　　　response.result.forEach(element => {

　　　　　　　　$(".index-main ul").append('<li><img data-original="' + element.product_img_url + '" src="images/loading.gif" /></li>')

　　　　　　});

　　　　　　$(".index-main ul img").lazyload({

　　　　　　　　effect:'fadeIn' //淡入效果

　　　　　　});

　　　　}

　　},

　　error:function(){

 

　　}

})

}