项目经理都不敢怼的页面图片展现方案[附源码]

前言

大家好呀，我是wangly，一名下班摸鱼的前端老倒霉蛋了。今年慢慢的开始把博客抓起来了。分享下一些平常技术和本身作的小项目。此次分享的是一个 <img> 标签在页面上渲染，如何作到让用户感到体验很是棒的呈现方法。

不是懒加载，和它没有半毛钱都没有。

众所周知，图片一直都是属于比较占用资源的东西。由于图片有大有小，小的多是几kb，高清的可能就是 MB  级别的东西了。也致使了用户在获取图片并展现到页面而且观看到时会存在必定的差别性。可能有些人家境贫寒，直接5G + 千兆网，风通常的速度，无痛的直接加载了出来。但也还有不少人网络限速，或者内网，局域网下的项目，你须要展现一些图片，速度时比较慢的，可能会加载失败。出现无图片，或者白色效果。

• 正常状况下这张图片是这样的。

• 我将网络调成了100b，它加载时，就成了这个样子

很明显这张图片由于网速的问题加载失败了，而这种图片就不是用户想要看到的。因此咱们一块儿来改造它吧。 @ wangly：此功能，已经集合到我的elegance-ui 组件库，代码都时取自其源码。

思路分析

其实实现起来很是的简单。众所周知，在img中有三个原生方法：

• onload：当图片加载完成时触发
• onerror：当图片加载发生错误时触发
• onabort: 图片加载的时候，用户手动中止的时候触发

过程实现

模板

结构很是的简单，一开始原本是考虑用伪类实现的，后面发现可能须要作自定义留了个遮罩层准备作插槽。放上一张完成后模板代码图片。

容器

<div class="gan-image">
</div>
复制代码

遮罩层

<div class="gan-image">
  <div class="over"></div>
</div>
复制代码

图片

<div class="gan-image">
  <div class="over"></div>
  <img src="" />
</div>
复制代码

逻辑

实现逻辑也很是简单，这个流程其实就是一个promise的执行过程。

加载中  =>  完成 | 失败

因此，咱们使用 state 存放它的状态，默认为 pending ，其次，当 onload 加载完成，状态会变成 resolve ，反之 onerror 失败后，状态会编程 reject 表示失败了。而后遮罩层根据不一样的 state 展现不一样的信息。我这里就没有去作多的处理，毕竟后面我本身会作成插槽去自定义样式。

Props & data

存放图片地址，展现方式，大小，和状态

@Prop({ required: true }) src!: string // 图片地址
@Prop({ default: 'fill' }) fit!: string // 图片展现对象
@Prop() width!: number // 宽度
@Prop() height!: number // 高度
private state = 'pending' // 状态
复制代码

methods

被img绑定的方法。里面作一些处理。

// 图片加载中
private onImageResolve(): void {
  this.state = 'resolve' // 成功
  this.$emit('resolve', this.state)
}

// 图片加载失败
private onImageReject(): void {
  this.state = 'reject' // 错误
  this.$emit('reject', this.state)
}
复制代码

computed

获取当前的状态文字。嘻嘻。

get cellText(): string {
  const { state } = this
  let message = '加载中'
  switch (state) {
    case 'pending': message = '加载中'
      break
    case 'reject': message = '加载失败'
      break
    case 'resolve': message = '加载成功'
      break
  }
  return message
}
复制代码

组件截图

CSS我想应该能够本身去定制。如loading动画等等...

展现

总结

很是感谢您观看本篇文章，作适合新手初次摸项目，或者不知道怎么去作的。能够先作demo。弄懂其中的原理。若是有哦碰到的小伙伴，能够继续优化下哦。本身使用的时候。 文章项目文件地址：前往github

五月前端面经：点击进入