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

wangly19
8,360 阅读3分钟

前言

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

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

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

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

image.png

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

image.png

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

思路分析

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

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

过程实现

模板

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

image.png

容器

<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动画等等...

image.png

展示

image.png
image.png

总结

非常感谢您观看本篇文章，做适合新手初次摸项目，或者不知道怎么去做的。可以先做demo。弄懂其中的原理。如果有哦碰到的小伙伴，可以继续优化下哦。自己使用的时候。 文章项目文件地址：前往github

五月前端面经：点击进入

avatar
文章
阅读
粉丝