Vue 图片懒加载

2022-02-24 18:32:31 阅读：162 来源： 互联网

标签：src Vue img lazyload scrollTop 加载图片

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

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

标签：src,Vue,img,lazyload,scrollTop,加载,图片
来源： https://www.cnblogs.com/boji/p/15933054.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue 图片懒加载

1. 原理

2. 实现

3. vue中lazyload插件