图片懒加载
图片懒加载在多图片页面中广泛应用，将可使化img标签进行临时图片加载成为了我们在性能优化中一门重要的技术，今天我们就为大家带来javascript的懒加载原生实现（做个小Demo）。
素材准备（html+css）
<style>
body{
height: 500;
}
img {
height: 500px;
width: 500px;
display: block;
}
</style>
<body>
<img
src=""
alt=""
lazyload="true"
data-origin="https://i.zgjm.org/top/20190526/3264-1.jpg?a=1"
/>
<img
src=""
alt=""
lazyload="true"
data-origin="https://i.zgjm.org/top/20190526/3264-1.jpg?a=2"
/>
<img
src=""
alt=""
lazyload="true"
data-origin="https://i.zgjm.org/top/20190526/3264-1.jpg?a=3"
/>
<img
src=""
alt=""
lazyload="true"
data-origin="https://i.zgjm.org/top/20190526/3264-1.jpg?a=4"
/>
<img
src=""
alt=""
lazyload="true"
data-origin="https://i.zgjm.org/top/20190526/3264-1.jpg?a=5"
/>
<img
src=""
alt=""
lazyload="true"
data-origin="https://i.zgjm.org/top/20190526/3264-1.jpg?a=6"
/>
<img
src=""
alt=""
lazyload="true"
data-origin="https://i.zgjm.org/top/20190526/3264-1.jpg?a=7"
/>
<img
src=""
alt=""
lazyload="true"
data-origin="https://i.zgjm.org/top/20190526/3264-1.jpg?a=8"
/>
<img
src=""
alt=""
lazyload="true"
data-origin="https://i.zgjm.org/top/20190526/3264-1.jpg?a=9"
/>
<img
src=""
alt=""
lazyload="true"
data-origin="https://i.zgjm.org/top/20190526/3264-1.jpg?a=10"
/>
</body>
js源码模块
<script>
//首先获取浏览器视口高度
var viewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
//定义懒加载方法
function lazyload() {
//获取所有携带lazyload属性和data-origin属性的img标签
var imgList = document.querySelectorAll('img[lazyload][data-origin]')
imgList.forEach((item) => {
//如果没有data-origin属性或者为空,直接返回
if (!item.dataset.origin) return
//获取标签元素与浏览器视口边界的距离
const rect = item.getBoundingClientRect()
//该if条件表明该img标签顶部已经在浏览器视口范围内
if (rect.top < viewHeight) {
//创建img标签，该语句类似于document.createElement("img")
var img = new Image()
img.src = item.dataset.origin
img.onload = function () {
item.src = img.src
}
//删除该标签专门为懒加载实现的两个属性，下次再遍历时可以立刻跳过
item.removeAttribute('data-origin')
item.removeAttribute('lazyload')
}
})
}
//在页面加载初始的时候执行一次，保证首屏的图片正常加载显示
lazyload()
window.addEventListener('scroll',lazyload)
</script>
总结:
本方法中利用了一个关键API:getBoundingClientRect来获取元素与浏览器视口的各种距离和位置，通过监听其中的top属性(或者也可以是bottom属性)来判断元素是否出现在视口范围内。
