前端的那些事--懒加载

瀑布流

何为瀑布流布局，一般就是值图片等宽不等长，像下面这个车的图片，高度不等，像瀑布一样往下排列，这种瀑布流布局在旅游类网站比较常见。
最简单的瀑布流：活用css3的新增属性：column-count:列数;这个定义了元素应该被划分的列数。

*{margin: 0px auto;}
.all{
	width: 630px;
	column-count:3;
}
.all div{
	width:200px;
	break-inside: avoid;
	border:1px solid;
}

<div class="all">
	<div style="height:100px">1</div>
	<div style="height:200px">2</div>
	<div style="height:200px">3</div>
	<div style="height:100px">4</div>
	<div style="height:100px">5</div>
	<div style="height:200px">6</div>
</div>

效果如下：

图片懒加载

打开页面页面全部展示的，那叫预加载，如果图片存放数量和内存都大，那么对于请求还是用户体验都是极差的，后台异步加载图片需要时间响应，具体图片加载过程参考js的时间线以及异步，如果等用户滑动滚动条到某个需要加载图片的区域，在加载对应区域需要展示的图片，那么就会优化一个页面的响应速度。

思路

图片放置的盒子是预加载的，那么可以在img标签把src的路径放空，把图片的路径放置到自定义属性上，等用户滑到指定区域，把自定义属性的图片路径拉到图片的路径上

代码

这里我使用的jq的代码环境，图片采用mock.js模拟图片数据

<ul class="all"></ul>

$(".all").append(function(){//添加节点
	let $_li = "";
	for(let i = 0; i < 45; i ++){//循环创建节点
		let hei = 100*~~(Math.random()*5+1);//图片随机高度
		let img = Mock.Random.image("230x"+hei+"/"+color()+"/FFF/&text=???");//Mock的创建图片语法接口
		$_li += `<li style="width:230px;height:${hei}px"><img class="img_node" data-src="${img}"/></li>`//创建图片并且把图片路径绑定到data-src中
	}
	return $_li
})

function color(){//随机16进制的颜色代码
	let col = "";
	var aryNum = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
	for(let i = 0; i < 6; i ++){
		col += aryNum[~~(Math.random()*aryNum.length)];//~~es新语法的取整，不熟悉的可以使用parseInt()
	}
	return col
}

function begin(){
	$(".img_node").not("[data-dia]").each(function(i,index){//对所有未绑定data-dia属性的元素遍历
		if($(this).offset().top <= $(window).height()+$(window).scrollTop()){//遍历元素距离距离顶部的高度和视窗的高度加上滚动条滑动距离高度的距离进行判断，小于后面的和说明图片到了需要加载的地方了
			$(this).attr('src', $(this).attr('data-src'));//把图片data-src的路径绑定到img的src上
			$(this).attr('data-dia',"true");//给已经加载的图片绑定data-dia属性，方便遍历没有加载的图片，同时也不会对已经加载图片的img做重复操作
		}
	})
}

window.addEventListener("scroll",fn(begin,1000));//绑定滚动条事件，使用1s延迟执行
			
function fn(callback,time){//使用防抖函数优化begin的触发
	let timer = null;
	return function(){
		clearInterval(timer);
		timer = setTimeout(callback,time)
	}
}

$(function(){//页面加载时触发一次，因为有些图片是放在页面打开可见位置，就需要把那些图片先加载出来
	begin();
})

关于防抖函数可以详看关于优化之防抖和节流