Vue 图片懒加载
作者：互联网
为什么要使用图片懒加载呢？什么是图片懒加载呢？
1. 原理
图片懒加载是前端页面优化的一种方式，在页面中有很多图片的时候，图片加载就需要很多时间，很耗费服务器性能，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。
2. 实现
思路：在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。图片的真实地址需要存储在data-src中。
满足img.offsetTop < 页面的可视区域高度+页面滚动的高度，这里是实现图片懒加载的关键，接下来看具体代码的实现
HTML
<img src="loading.gif" data-src="1.jpg" alt="">
<img src="loading.gif" data-src="2.jpg" alt="">
<img src="loading.gif" data-src="3.jpg" alt="">
<img src="loading.gif" data-src="4.jpg" alt="">
<img src="loading.gif" data-src="5.jpg" alt="">
<img src="loading.gif" data-src="6.jpg" alt="">
JS
let img = document.getElementsByTagName('img');
let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
lazyload();
window.addEventListener('scroll',lazyload);//监听页面滚动事件
function lazyload(){
//可见区域高度, =>浏览器页面的高度, 最浏览器大小变化而变化,不一定是最大化的
var seeHeight = window.innerHeight;
//页面滚动的高度, =>超出浏览器上沿,消失的页面的高度, 随鼠标滚轮滚动而变化
//当body设置overflow:scroll document.body.scrollTop≠0 否则document.documentElement.scrollTop
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(let i = n; i < img.length; i++){
//长截屏时,img在网页中距离网页顶的高度, 是固定的
//offsetTop元素到最近的一个具有定位的祖宗元素的距离，若祖宗都不符合条件，祖宗为body。
if(img[i].offsetTop < seeHeight + scrollTop){
if(img[i].getAttribute("src") == 'loading.gif'){
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
补充: scrollTop用法
用于父元素, 值=子元素超出父元素的高度(滚动条的高度), 若用于子元素, 因为子元素内没有超出的, scrollTop一直=0
<style>
#outer {
height: 100px;
overflow: scroll;
}
#inner {
height: 200px;
background-color: #d0ffe3;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
<script>
var outer = document.documentElementById("outer");
setInterval(() => {
console.log(outer.scrollTop);
}, 1000);
</script>
</body>
3. vue中lazyload插件
1 安装vue-lazyload npm i vue-lazyload -S
2 在main.js配置文件引入
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3, //预加载高度
error: require('../static/img/error.jpg'), //错误展示图片
loading: require('../static/img/loading.gif'), //加载等待图片
attempt: 1 //尝试次数
})
3 使用，将img标签的src换成v-lazy即可
<img v-lazy="http://www.baidu.com/userImg.png" alt="" />
4 使用不同的加载占位图，写法如下
<img v-lazy="{src: item.imgUrl, loading: 'http://xx.com/loading.png'}" alt="" />
标签：src,Vue,img,lazyload,scrollTop,加载,图片 来源： https://www.cnblogs.com/boji/p/15933054.html