項目經理都不敢懟的頁面圖片展現方案[附源碼]

時間 2020-05-09

原文原文鏈接

前言

大家好呀，我是wangly，一名下班摸魚的前端老倒黴蛋了。今年慢慢的開始把博客抓起來了。分享下一些平常技術和本身作的小項目。此次分享的是一個 <img> 標籤在頁面上渲染，如何作到讓用戶感到體驗很是棒的呈現方法。html

不是懶加載，和它沒有半毛錢都沒有。前端

衆所周知，圖片一直都是屬於比較佔用資源的東西。由於圖片有大有小，小的多是幾kb，高清的可能就是 MB 級別的東西了。也致使了用戶在獲取圖片並展現到頁面而且觀看到時會存在必定的差別性。可能有些人家境貧寒，直接5G + 千兆網，風通常的速度，無痛的直接加載了出來。但也還有不少人網絡限速，或者內網，局域網下的項目，你須要展現一些圖片，速度時比較慢的，可能會加載失敗。出現無圖片，或者白色效果。vue

正常狀況下這張圖片是這樣的。

我將網絡調成了100b，它加載時，就成了這個樣子

很明顯這張圖片由於網速的問題加載失敗了，而這種圖片就不是用戶想要看到的。因此咱們一塊兒來改造它吧。 @ wangly：此功能，已經集合到我的elegance-ui 組件庫，代碼都時取自其源碼。git

思路分析

其實實現起來很是的簡單。衆所周知，在img中有三個原生方法：

onload：當圖片加載完成時觸發
onerror：當圖片加載發生錯誤時觸發
onabort: 圖片加載的時候，用戶手動中止的時候觸發

過程實現

模板

結構很是的簡單，一開始原本是考慮用僞類實現的，後面發現可能須要作自定義留了個遮罩層準備作插槽。放上一張完成後模板代碼圖片。 github

容器

<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的執行過程。typescript

加載中 => 完成 | 失敗編程

因此，咱們使用 state 存放它的狀態，默認爲 pending ，其次，當 onload 加載完成，狀態會變成 resolve ，反之 onerror 失敗後，狀態會編程 reject 表示失敗了。而後遮罩層根據不一樣的 state 展現不一樣的信息。我這裏就沒有去作多的處理，畢竟後面我本身會作成插槽去自定義樣式。promise

Props & data

存放圖片地址，展現方式，大小，和狀態網絡

@Prop({ required: true }) src!: string // 圖片地址
@Prop({ default: 'fill' }) fit!: string // 圖片展現對象
@Prop() width!: number // 寬度
@Prop() height!: number // 高度
private state = 'pending' // 狀態
複製代碼

methods

被img綁定的方法。裏面作一些處理。post

// 圖片加載中
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
}
複製代碼