杭州IT培训
美国上市IT培训机构

400-111-8989

关于图片加载,你需要学习一下

  • 时间:2022-11-28 13:59
  • 发布:互联网
  • 来源:精品干货

从何而来

这篇文章,出自我自己的开源组件库 fighting-design[1] 中的 Avatar 头像[2] 组件的 load-image[3] 类。

相比于其它的静态组件,像图片加载这种的组件,内部我做了很多的优化,对于图片的加载和错误的处理,我都尽可能的将每种可能出现的结果都考虑到,针对每种不确定的结果做出相应的提示,以便于提升用户体验。

设计思路

我的设计想法是:通过一个加载类,传入 dom 元素、 props 和 emit。先创建出一个虚拟的 image 元素进行尝试加载,加载成功获失败都会进入下一步的函数,做出对应从处理逻辑。

初步设计

首先类中先有一个加载的方法 loadCreateImg,代码如下:

class Load {
  constructor(node, props, emit) {
    this.node = node
    this.props = props
    this.emit = emit
  }
  // 加载 src   loadCreateImg = () => {
    const newImg = new Image() // 新建一个虚拟的 img     newImg.src = this.props.src // 将传入的 src 赋值给虚拟节点     // src 加载失败     newImg.addEventListener('error'(evt) => {
      // 加载失败的处理     })

    // src 加载成功     newImg.addEventListener('load'(evt) => {
      // 加载成功的处理     })
  }
} 

首先我创建了一个 Load 的加载类,需要传入 node 参数作为最终需要渲染的 dom 节点,props 是传入的组件内部的 props 参数,内部包含图片需要加载的 src 路径,emit 包括一些回调参数。

类的内部有个 loadCreateImg 的方法,调用可创建一个虚拟的 Image 元素,直接将传入的 props.src 赋值并加载。监听上面的 error 和 load 事件,即可监听到图片是否加载成功,以便做出不同的状态。

成功和失败

对于成功或失败的处理,我新增了 onerror 和 onload 方法,来处理加载成功和失败之后的不同处理状态

class Load {
  constructor(node, props, emit) {
    this.node = node
    this.props = props
    this.emit = emit
  }
  loadCreateImg = () => {
    const newImg = new Image()

    newImg.src = this.props.src

    newImg.addEventListener('error'(evt) => {
      this.onerror(evt) // 新增     })

    newImg.addEventListener('load'(evt) => {
      this.onload(evt) // 新增     })
  }
  // 加载成功   onload = (evt) => {
    this.node.src = this.props.src
  }
  // 加载失败   onerror = (evt) => {
    // ……   }
} 

对于加载成功,处理方式是,将传入的真是的 dom 节点直接赋值给传入的 props.src 即可完成加载。

加载失败

对于加载失败的处理,Fighting Design 内部做了很多处理,比如可以传入 err-src 的备用路径加载,在 src 加载失败之后,如果 err-src 存在的话,那么就需要加载 err-src 。接下来继续完善类方法:

首先要在 onerror 方法中判断是否存在 err-src,如果有 err-src 那么就需要重新调用 loadCreateImg 重新加载,但是现在的代码显然不能满足需要,所以 loadCreateImg 需要接收一个可选的参数为 errSrc,因为只有在加载失败之后才需要再次调用该方法传入 err-src,所以方法内部就可以根据 err-src 是否存在,来做出不同的处理:

class Load {
  constructor(node, props, emit) {
    this.node = node
    this.props = props
    this.emit = emit
  }
  loadCreateImg = (errSrc?: string) => {
    const newImg = new Image()

    // 如果 errSrc 存在 就尝试加载 errSrc     if (errSrc) {
      newImg.src = errSrc
    } else {
      newImg.src = this.props.src
    }

    newImg.addEventListener('error'(evt) => {
      this.onerror(evt)
    })

    newImg.addEventListener('load'(evt) => {
      this.onload(evt)
    })
  }
  onload = (evt) => {
    this.node.src = this.props.src
  }
  // 加载失败   onerror = (evt) => {
    // 如果存在 errSrc 则继续尝试加载     if (this.props.errSrc) {
      // 将 errSrc 传给 loadCreateImg 方法       return this.loadCreateImg(this.props.errSrc)
    }

    // 否则返回失败回调     this.emit('error', evt)
  }
} 

但是上面代码存在两个问题:

  1. 首先我们发现,在 onload 加载成功的方法中,将真实 dom 始终赋值的始终 是 src
onload = (evt) => {
  // 始终赋值为 props.src   this.node.src = this.props.src
} 

但是 src 并不是始终可以加载成功的,所以还是需要动态的去将真正加载成功的 src 传给 onload 方法,那么真正加载成功的 src 也就是在 load 方法中。并且还要加入成功的 emit

  1. 其次,在处理加载失败的 onerror 方法中,因为判断了如果存在 errSrc 就继续调用 loadCreateImg 加载方法重新加载。问题是,如果传入了 errSrc 那么 if (this.props.errSrc) 其实是始终为真的,这也就导致了死循环,会重复调用加载函数。
onerror = (evt) => {
  // 判断始终为真   if (this.props.errSrc) {
    return this.loadCreateImg(this.props.errSrc)
  }

  // 否则返回失败回调   this.emit('error', evt)
} 

所以就需要给它一个可以变为假的时机,那么修复方法为:在传给 loadCreateImg 方法之后,将 errSrc 清空,这样加载一次之后就可以判断为假了,所以完整代码为:

class Load {
  constructor(node, props, emit) {
    this.node = node
    this.props = props
    this.emit = emit
  }
  loadCreateImg = (errSrc?: string) => {
    const newImg = new Image()

    // 如果 errSrc 存在 就尝试加载 errSrc     if (errSrc) {
      newImg.src = errSrc
    } else {
      newImg.src = this.props.src
    }

    newImg.addEventListener('error'(evt) => {
      this.onerror(evt)
    })

    newImg.addEventListener('load'(evt) => {
      this.onload(evt, newImg.src) // 将加载成功的 src 传给 onload 函数     })
  }
  // 新增 src 属性   onload = (evt, src: string) => {
    this.node.src = src // 将真实 dom 的 src 赋值给传入的 src     this.emit('load', evt) // 新增   }
  onerror = (evt) => {
    if (this.props.errSrc) {
      this.loadCreateImg(this.props.errSrc)
      this.props.errSrc = '' // 清空 errSrc 避免重复调用死循环       return     }

    this.emit('error', evt)
  }
} 

回调函数

有些时候,我们还需要通过一个布尔值来判断图片是否加载成功,或者进行其它判断。

Fighting Design 内部对图片加载失败做了特殊的样式处理来提示用户,所以需要一个布尔值和 v-if 来展示不同的状态,这里就涉及到了类的第四个参数,也就是一个可选的回调函数

这样就可以在加载成功和加载失败的时候通过回调函数来返回一个布尔值判断是否加载成功,代码如下:

class Load {
  constructor(node, props, emit, callback) {
    this.node = node
    this.props = props
    this.emit = emit
    this.callback = callback // 新增 callback 参数   }
  loadCreateImg = (errSrc?: string) => {
    const newImg = new Image()

    if (errSrc) {
      newImg.src = errSrc
    } else {
      newImg.src = this.props.src
    }

    newImg.addEventListener('error'(evt) => {
      this.onerror(evt)
    })

    newImg.addEventListener('load'(evt) => {
      this.onload(evt, newImg.src)
    })
  }
  onload = (evt, src: string) => {
    this.node.src = src
    this.emit('load', evt)

    // 如果 callback 存在,在加载成功的时候返回 true     if (this.callback) {
      this.callback(true)
    }
  }
  onerror = (evt) => {
    if (this.props.errSrc) {
      this.loadCreateImg(this.props.errSrc)
      this.props.errSrc = ''       return     }

    this.emit('error', evt)
    // 如果 callback 存在,在加载失败的时候返回 false     if (this.callback) {
      this.callback(false)
    }
  }
} 

上面代码即可实现判断是否加载成功的需求。

当然,回调函数你可以尽情的发挥想象做出更多的事情,这里仅提供部分用法。

懒加载

图片的懒加载,也是一个图片加载必备的功能了,这里我使用的是内置的 IntersectionObserver[4] 接口,对于这个方法,这里不过多描述,各位可以通过 MDN[5] 进行学习。

对于懒加载,因为这是一个可选的属性,并不是每次都需要,所以我将懒加载单独抽离出来的一个 Lazy 类进行实现,再将 Lazy 类继承到 Load 类,代码如下:

class Lazy extends Load {
  constructor(img, props, emit, callback) {
    // super 关键字调用     super(img, props, emit, callback)
  }
  observer = () => {
    const observer = new IntersectionObserver(
      (arr): void => {
        // 如果进入可视区域         if (arr[0].isIntersecting) {
          // 开始加载图片 调用父类           this.loadCreateImg()
          observer.unobserve(this.node)
        }
      },
      /**
       * rootMargin 为触发懒加载的距离 通过 props 传入
       * 
       */       { rootMargin: this.props.rootMargin }
    )
    return observer
  }
  // 执行 懒加载   lazyCreateImg = (): void => {
    // IntersectionObserver 内部方法,需要将 dom 节点传入     this.observer().observe(this.node)
  }
} 

IntersectionObserver 接口可以判断 dom 元素是否进入可视区域,通过内置方法判断进入可视区域之后,执行父类的 loadCreateImg 方法进行加载,从而实现懒加载。

对外接口

对于 Load 类和 Lazy 类,Fighting Design 并没有直接暴露出去提供使用,而是暴露出了一个全新的 loadImage 函数,让它去根据是否为懒加载而实例化不同的类,再调用加载方法:

// 导出对外接口 export const loadImage = (node, prop, emit, callback) => {
  /**
   * 如果传入了 lazy 则执行懒加载类
   * 否则执行正常加载类
   */   if (prop.lazy) {
    const lazy = new Lazy(node, prop, emit, callback)
    return lazy.lazyCreateImg()
  }
  const load = new Load(node, prop, emit, callback)
  load.loadCreateImg()
} 

测试使用

写好的函数测试一下看看:

<script lang="ts" setup>
  import { loadImage } from '../../packages/fighting-design/_utils'
  import { ref, onMounted } from 'vue'

  const myImg = ref(null as unknown as HTMLImageElement)

  // 模拟 props
  const props = {
    src: '../images/auto/my.jpg',
    errSrc: '../images/auto/4.jpg',
    lazy: true
  }

  onMounted(() => {
    loadImage(myImg.value, props)
  })
</script>

<template>
  <img ref="myImg" src="" />
</template> 

可以看到,是成功执行的。

完整代码

完整代码可参考 load-image[6]

预约申请免费试听课

怕钱不够?就业挣钱后再付学费!    怕学不会?从入学起,达内定制课程!     担心就业?达内多家实践企业供你挑选 !

【免责声明】本文部分系转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与联系我们,我们会予以更改或删除相关文章,以保证您的权益!"
上一篇:Java 后端有哪些不用学的技术?
下一篇:没有下一篇了

Java 后端有哪些不用学的技术?

分布式存储之数据切片

策略模式:巧妙替代你的if-else

sorted()之正序倒序

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

  • 搜索抖音号

    搜索抖音号:1821685962

    免费领取达内课程视频学习资料

Copyright © 2021 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
江西省

贵州省

广西省

海南省