直播平台搭建，vue中实现图片懒加载的几种方法

直播平台搭建，vue中实现图片懒加载的几种方法

一、使用Vue本身的指令

Vue本身提供了一个指令v-lazy，可以实现图片懒加载。使用方式如下：

 

1	<img v-lazy="imageSrc" />

​

其中，imageSrc是需要懒加载的图片路径。当图片进入可视区域时，Vue会自动加载图片。

 

二、使用第三方库(推荐)

vue社区中有许多第三方库可以实现图片懒加载，例如vue-lazyload、vue-lazyload-enhanced等。这些库提供了更多的配置项和功能，可以满足更多的需求。使用方式如下：

 

2.1  安装下载

1	npm i vue-lazyload@1.2.3 -S

 

2.2  main.js 导入

 

1	import VueLazyload from 'vue-lazyload'<br> <br>Vue.use(VueLazyLoad, {<br>  // 可选配置项，可省略<br>  error: require('./error.jpg'), // 加载失败时显示的图片<br>  loading: require('./loading.gif'), // 加载中时显示的图片<br>  preLoad: 1.3, // 预加载高度的比例<br>  attempt: 3 // 尝试加载次数<br>})

 

2.3  页面使用

 

1

<template>  <br>  <div>  <br>    <img v-lazy="imageSrc" />  <br>  </div>  <br></template>  <br>  <br><script>   <br>import Vue from 'vue'       // main.js 已引入的可忽略<br>import VueLazyload from 'vue-lazyload'  // main.js 已引入的可忽略<br>Vue.use(VueLazyload, {      // main.js 已引入的可忽略 <br>  // 配置项...  <br>})  <br></script><br> <br> <br>// 个人实操使用，可参考<br><template><br>  <div><br>    <div><br>      <img v-for="(url, index) in imgUrl" :key="index" v-lazy="url" /> // 遍历图片<br>    </div><br>  </div><br></template><br> <br><script><br>  export default {<br>    data() {<br>      return {<br>        imgUrl: [  // 需要显示的所有图片<br>          require('@/assets/help/1.jpg'),<br>          require('@/assets/help/2.jpg'),<br>          require('@/assets/help/3.jpg'),<br>          require('@/assets/help/4.jpg'),<br>          require('@/assets/help/5.jpg'),<br>        ],<br>      }<br>    },<br>  }<br></script><br><style scoped> // 根据视口大小显示图片宽度<br>  @media screen and (max-width: 1200px) {<br>    .demo-image__lazy img {<br>      width: 100%;<br>    }<br>  }<br>  @media screen and (min-width: 1200px) {<br>    .demo-image__lazy img {<br>      width: 50%;<br>    }<br>  }<br></style>

 

 三、自定义指令

除了使用Vue本身的指令和第三方库外，还可以通过自定义指令来实现图片懒加载。在自定义指令中，可以通过Intersection Observer API来监听目标元素的交叉状态，从而实现图片的懒加载。使用方式如下：

 

1

<br><template>  <br>  <div>  <br>    <img v-lazyload="imageSrc" />  <br>  </div>  <br></template>  <br>  <br><script>  <br>export default {  <br>  directives: {  <br>    lazyload: {  <br>      inserted: function (el, binding) {  <br>        const observer = new IntersectionObserver(([entry]) => {  <br>          if (entry.isIntersecting) {  <br>            const img = new Image()  <br>            img.src = binding.value  <br>            el.appendChild(img)  <br>            observer.unobserve(el)  <br>          }  <br>        }, {threshold: 0.1})  <br>        observer.observe(el)  <br>      }  <br>    }  <br>  }  <br>}  <br></script>

 

 以上就是 直播平台搭建，vue中实现图片懒加载的几种方法，更多内容欢迎关注之后的文章