Life is too short to waste a second

HTML中图片的细节与错误处理

引入一个图片可能带来各种错误,基于 Movie Paradise 的开发,我总结了以下几个细节:

  • 在获取图片 src 时要有加载动画

  • 在加载图片时要有加载动画

  • 在图片获取失败时要有错误提示,更好的,使用备用链接再次尝试获取

  • 添加 alt 属性为视觉障碍者提供文字描述

  • 保持容器的长宽以免错误时影响排版(按需)

动画主要还是 CSS 需要慢慢调,下面记录一下记载失败的处理

常用解决方法有:

CSS 伪元素 after: 当错误时 after 设置 background image,简单清晰,不过你很难动态处理错误时的 background url,而且 CSS 写 url 我个人不是很喜欢,我认为类似 url 的内容应该是由 JS 处理的

JS: img 标签加载失败会触发 error 事件,监听它进行处理即可,网上很多解决方法是只有一个备用链接的,当备用链接还是出错就会死循环了,Vue 中,我们可以加个 once 让其只执行一次。不过我希望能有更多的备用链接来确保图片能正常加载,因为 Movie Paradise 中图片对用户体验来说是十分重要的,网上没有找到现成的轮子,只能自己造了。

Code:

// import config
import Config from '../config'

export default function fallbackPoster (movie) {
  // get full url from fallbackUrl Config
  const fallbackUrl = Config.fallbackUrl.map(url => {
    return url + movie._id.toString() + '.jfif'
  })
    // get index
  const index = fallbackUrl.indexOf(movie.poster)
  // when index reach to end, error is true
  if (index === fallbackUrl.length - 1) {
    return true
  } else {
    // else, define url to fallbackUrl
    movie.poster = fallbackUrl[index + 1]
  }
}

我们 Config 中的 fallbackUrl 是一个字符串数组,可以任意增加备用地址,但需要确保资源文件命名的唯一性。上述代码我们使用 movie._id 命名,通过比较当前 url 在 fallbackUrl 中的 index,我们可以在错误时依次替换 url,到最后一个时返回 true 表示这张图片没救了,当然你可以根据自己的需求修改,这里只是给个思路。

以上,细节的把控往往能给用户带来更好的体验,前端开发中,永远不要给一个空白的页面让用户干等。

发表评论

电子邮件地址不会被公开。