图片懒加载
2021-06-28 本文已影响0人
杭州程序员小陈
1为什么要图片懒加载
懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不是一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。
当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。
2.实现图片懒加载的原理
图片加载是src属性做的事情，那么我们只要不给这个src属性赋值就不会发起请求了
然后，html5还提供自定义属性的方式：data-xxx
我们可以先把图片地址存在这里面，然后判断这个图片是否进入屏幕了，一旦进入屏幕，就把这个图片地址赋值给src,让它发起请求获取图片
但是实际上，我们的网络也没有那么稳定，如果网络不佳，图片将会为空
这将会造成页面布局的混乱，为了避免这种情况，可以占位
3.实现判断图片是否在屏幕上
1，DOMobj.getBoundingClientRect().top //获取该元素到屏幕顶部的距离
2，window.innerHeight //屏幕的高度
也就是当元素到屏幕顶部的距离小于屏幕高度时，就可以判定图片进入了屏幕。就把图片地址赋值给src，从而发起请求获取图片。
4.实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.lazy-load{
display: block;
width: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<img data-src="./image/1.jpg" alt="1" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
<img data-src="./image/2.jpg" alt="2" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
<img data-src="./image/3.jpg" alt="3" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
<img data-src="./image/4.jpg" alt="4" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
<img data-src="./image/5.jpg" alt="5" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
<img data-src="./image/6.jpg" alt="6" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
<img data-src="./image/7.jpg" alt="7" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
<img data-src="./image/8.jpg" alt="8" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
</div>
</body>
<script type="text/javascript">
//图片加载的函数
function imgonload() {
//把伪数组转化为真数组
let imgs = [...document.querySelectorAll('.lazy-load')]
for(let i=0; i<imgs.length; i++) {
if(imgs[i].getBoundingClientRect().top < window.innerHeight) {
//图片一旦有src就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中
imgs[i].src = imgs[i].dataset.src;
}
}
}
//第一次页面加载的时候，让屏幕内的图片正常加载，而屏幕外的图片就使用loading图片代替
window.onload = imgonload;
//监听滚轮事件，
window.addEventListener('scroll',imgonload)
</script>
</html>
