Vue 图片懒加载

2023-09-26 17:11:28

为什么要使用图片懒加载呢？什么是图片懒加载呢？

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="">

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="" />

码农公寓

1. 原理

2. 实现

3. vue中lazyload插件

相关文章