图片懒加载技术

2018-05-04

浏览器相关高度、宽度

网页可视区高/宽：

1.clientHeight/clientWidth:height+padding-滚动轴高度
2.offsetHeight/offsetWidth:height+padding+border+滚动轴高度

网页全文高/宽

1.scrollHeight/scrollWidth:
1)有滚动条时:包含所有的高度(隐藏的部分也算入)
2)无滚动条时:值=clientHeight/clientWidth

网页滚动距离

scrollTop/scrollLeft:
1)无滚动条时:值=0
2)有滚动条时:值=滚动的距离

相对于父容器的左方/上方距离

offsetLeft/offsetTop=marginLeft+offsetParent的(paddingLeft+borderLeft+marginLeft)

左/上边框宽度

clientLeft/clientTop=边框的宽度

判断元素位于页面底部

判断元素到底部:clientHeight===scrollHeight-scrollTop

图片懒加载

懒加载机制

网页需要展示很多图片，而用户可能没有接着浏览余下图片的意图，这样就浪费了很大的资源，一次请求了那么多图片，而且一张图片还有几兆，结果实际上没用到，所以为了减少服务器的压力，使用懒加载技术，不直接给图片标签加上src，给图片加上新的属性，其中保存真正的src，例如data-src，当用户浏览到图片时才进行加载。

判断用户当前浏览的位置

判断图片位置
如图所示，当图片：滚动高度+可视区高度>图片距离顶部的距离时就将data-src替换到src即可

注意：不要在img标签上加src属性，如果设置src=””，大多数浏览器仍会请求，而且请求的是当前页面数据。

原生js实现的demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片</title>
	<style>
		img {
			display: block;
			width: 500px;
			height: 400px;
		}
	</style>
</head>
<body>
	<img alt="" data-scr="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
	<img alt="" data-scr="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
	<img alt="" data-scr="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
	<img alt="" data-scr="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
	<img alt="" data-scr="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
	<img alt="" data-scr="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
	<img alt="" data-scr="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">

<script>
	var imgs = document.querySelectorAll('img');//获取所有图片
	var length = imgs.length;
	var n = 0;//保存已经加载了的图片数量

	// window.onload = lazyLoadImg;
	window.onscroll = lazyLoadImg;

	function lazyLoadImg() {
		var userHeight = document.documentElement.clientHeight;
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		for(var i =n; i < length; i++) {
			if(imgs[i].offsetTop < userHeight + scrollTop) {
				if(imgs[i].getAttribute('src') === '' || imgs[i].getAttribute('src') === null) {
					imgs[i].src = imgs[i].getAttribute('data-scr');
				}
				n = i + 1;
			}
		}
	}
</script>
</body>
</html>