vue中实现图片懒加载的方法(一)

这篇具有很好参考价值的文章主要介绍了vue中实现图片懒加载的方法(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.背景:

     前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载。

2.懒加载的意义

   图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是页面一次性展示了很多图片的情况,所以在这种情况下,为了提升网页性能,提高用户体验我们可以用懒加载来实现。

3.实现原理

   主要思路就是在可视区域内得图片进行加载,反之默认不做图片得请求,可以用我们本地自己定义得比较小得loading图代替(当然这个loading图片也会做网络请求,但是是我们自己定义的,那便可空,选的图会比较小,而且在同一时刻,相同图片只会请求一次),本次实现,源码里没有给默认的loading图片,而是把图片加载之前的样式,以及图片加载失败后的样式交给使用者自己定义

这里尝试了两种方案:

方案1: 传统实现图片懒加载,会去监听滚动条的变化,当图片进入可视区域内,通过监听当前图片以及滚动条位置,判断是否已经进入可视区域

主要用到:

window.addEventListener("scroll", (e) => {});  // 监听滚动

Element.getBoundingClientRect() // 方法会返回一个DOMRect对象,其包含了当前元素的大小,以及相对于视窗的位置信息

方案1 代码走起:

<template>
      <div>
        <img v-for="(item,i) in lazyImgs" style="width: 180px;height:240px;margin- 
          top:40px;display: inline-block;" :data-src="item"  :key="i" src=""   
        alt="">
      </div>
</template>


async mounted() {
    window.addEventListener("scroll", (e) => {
      // 这里做一个 节流 操作
      if (this.timer) return;
      this.timer = setTimeout(() => {
        this.query("img[data-src]").forEach((img) => {
          const rect = img.getBoundingClientRect();
          if (rect.top < window.innerHeight) {
            img.src = img.dataset.src;
            // 我们是通过img[data-src]查找所有img标签的,渲染后就删除data-src可减少forEach循环的计算成本
            img.removeAttribute("data-src"); 
          }
        });
        clearTimeout(this.timer);
        // 这里一定要把定时器置为 null
        this.timer = null
      }, 300);
    });
},


methods: {
  query(selector) {
     return Array.from(document.querySelectorAll(selector));
  },
}

上面方法是传统方法通过监听滚动条来实现

方案2: 利用监听器实现  

用到的api       IntersectionObserver    不了解的小伙伴自行百度一下 就是一个监听器,学名叫交叉观测器,可以监听任何元素,当元素进入可视区域内,便会触发回调函数

我这里封装成了组件 不多说上代码

<template>
  <div class="img-box">
    <img
      v-lazy="lazy"
      :data-src="src"
      src=""
      @load="loadImg"
      @error="error"
      alt=""
    />
    <slot v-if="slotShow"></slot>
    <slot name="err" v-if="!errFlag"></slot>
  </div>
</template>
<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    // 是否懒加载
    lazy: {
      type: Boolean,
      default: false
    }
    // errorImg: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      slotShow: true,
      errFlag: true
    }
  },

  // 定义指令
  directives: {
    'lazy':{
      inserted(el,{value}) {
      // 如果指令传过来得值是 false 就不做懒加载处理
      if(!value) return
      // el.style.backgroundColor = '#f9ccd4'
      // const imgSrc = el.src;
      const imgSrc = el.dataset.src;
      // el.src = "";
      // 观察者
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        // console.log(aaa[0].boundingClientRect.top,'这是个啥');
        // 如果元素出现在可视区域内,和离开可视区域的时候被触发
        if (isIntersecting) {
          // 出现在可视区域,再加载图片
          el.src = imgSrc;
          el.dataset.flag = true
          // 停止观察
          observer.unobserve(el);
        }
      });
      // 开启观察(传入要观察的dom元素)
      observer.observe(el);
    },
    }
  },
  methods: {
    loadImg() {
      this.slotShow = false
    },
    error(e) {
      if(!e.srcElement.dataset.flag||!this.errFlag) return false
      console.log(e.srcElement.src,'这加载错误了');
      // 这里我们就不给设置失败后的图片了,留给使用者自行设置样式
      // e.srcElement.src = this.errorImg
      this.errFlag = false
      this.slotShow = false
    }
  }
}
</script>
<style lang="less" scoped>
.img-box {
  display: flex;
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

需要用到的地方 引入组件

<template>
  <div>
    <!-- 图片懒加载最好设置图片高度,因为不管你是监听滚动条的方式,还是利用监听器api实现,都跟元素可视区域有关系,而高度就影响是否在可视区域内 -->
    <lazyImg style="width: 180px;height:240px;display: inline-block;" v-for="(item,i) in lazyImgs" :key="i" :src="item" lazy>
      <!-- 图片加载之前默认在图片元素上方展示的样式--自由发挥 -->
      <div class="slot-txt">加载中</div>
      <template #err>
        <!-- 图片加载失败后在上面展示的样式--- 自由发挥 -->
        <div class="slot-txt"><img src="@/assets/images/loading.gif" alt=""></div>
      </template>
    </lazyImg>
  </div>
</template>
<script>
import lazyImg from './components/lazyImg'
export default {
  components: {
    lazyImg
  },
  data: {
    return {
      lazyImgs: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.slot-txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #f9ccd4;
  z-index: 100;
}
</style>

好了,今天时间有些仓促,就到这里,完结,撒花,后期再润色,嘿嘿

经过反复测试,发现有点小坑,二期已解决,需要得小伙伴移步二期文章来源地址https://www.toymoban.com/news/detail-419433.html

到了这里,关于vue中实现图片懒加载的方法(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue中实现图片黏贴上传到服务器:功能分析和实现

    主要的知识点是,浏览的 paste 事件, clipboardData 。 paste 一个标准的Dom事件,粘贴事件,会在用户按下 Ctrl+v ,或者通过鼠标复制时触发.像其他事件一样,我们可以通过 addEventListener 为一个 Element 添加一个粘贴事件的监听函数 如以下代码。   我使用vue3,在页面初始化的时候,

    2024年02月15日
    浏览(36)
  • vue 实现图片懒加载

    有些页面可能展示的是大量的图片,如果我们一次性加载所有图片就会浪费性能,影响用户体验,所以我们就会懒加载这些图片。即可视区域之外的图片不加载,随着页面的滚动,图片进入可视区域,则触发图片的加载显示。 优点:页面加载速度快,用户体验感更好且节省流

    2024年02月12日
    浏览(86)
  • Vue3实现图片懒加载

    通过第三方插件VueUse实现图片懒加载。 1、需要安装依赖 2、定义懒加载的插件 xxx/index.js 3、在main.js文件内注册指令 4、使用 注册好指令就可以在标签上使用,使用指令时需要加v-。 这样一个自定义全局指令实现图片懒加载就做好了。

    2024年04月10日
    浏览(48)
  • Vue3实现图片懒加载及自定义懒加载指令

    大家好,我是南木元元,热衷分享有趣实用的文章。图片懒加载是一种常见性能优化的方式,它只去加载可视区域图片,而不是在网页加载完毕后就立即加载所有图片,能减少很多不必要的请求,极大的提升用户体验。 图片懒加载的 实现原理 :在图片没进入可视区域的时候

    2024年02月13日
    浏览(30)
  • Vue实现图片预览,侧边栏懒加载,不用任何插件,简单好用

    实现样式 需求 实现PDF上传预览,并且不能下载 第一次实现:用vue-pdf,将上传的文件用base64传给前端展示 问题: 水印第一次加载有后面又没有了。 当上传大的pdf文件后,前端获取和渲染又长又慢,甚至不能用 修改实现模式 前端上传PDF,后端将PDF转化成一页一页的图片 前端

    2024年01月24日
    浏览(41)
  • vue2中实现 TDesign 树形懒加载

    之前我有写过Element ui的树形懒加载 其主要是通过load函数来实现 而TDesign也是照虎画猫 他也是主要靠load 我们先来看一个基本的组件 这里和Element ui不同的是 Element ui的树形load一进来就会触发一次 你可以通过load来加载根目录的数据 但TDesign是只有点击父节点才会触发 一进来是

    2024年02月09日
    浏览(45)
  • echarts 使用地图,设置背景图片和高亮图片,点击实现高亮显示,更换散点图图片,高亮散点图形,3D悬浮效果展示地图,集成Vue组件

    先看下   需要实现的效果: 第一步 需准备需要的插件  1  注意新版 echarts 的引入方式为:  import * as echarts from \\\'echarts\\\',这里我把 echarts 直接挂载到了Vue上,本项目使用echarts比较多,这样的话很方便,也可以在需要echarts的模块按需引入        在main.js中添加以下代码:

    2024年02月10日
    浏览(52)
  • vue中实现点击下载图片

    Vue中实现点击下载图片的方法可以使用HTML5中的 a 标签的 download 属性或者通过JS来实现。 使用 a 标签的 download 属性可以直接在html中进行设置,例如: 通过JS实现可以使用创建URL对象的方法,代码如下: 以上代码通过fetch获取图片并转化为blob类型,然后利用URL.createObjectURL创建

    2024年02月11日
    浏览(46)
  • vue设置页面背景及背景图片

    本地静态图片  cdn图片 设置背景色 实战-PC web登录页 实战-小程序登录页

    2024年02月12日
    浏览(54)
  • UNITY 基础之 实现动态加载网络端、PC端和 ANDROID 端指定路径下的图片的简单方法

    Unity中的一些基础知识点,便于后期查看学习。 本节介绍,如何动态加载网络上,电脑上或者Android手机上指定路径的图片的简单方式,方法不唯一,仅供参考。 1、UnityWebRequest 发起网络请求,DownloadHandlerTexture 作为发起下载图片,解析得到图片 2、下载地址不仅支持网络路径

    2024年02月09日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包