阅读 844

每日 30 秒 ⏱ img の 小九九

简介

<img>、SEO、跨域、无障碍阅读、事件、图片标签

小九九 最直接的联想便是 九九乘法表,但是 小九九 也用在形容一个人在心里打着算盘 小主意小秘密。小秘密已经被 H1 の 小秘密 这篇文章使用了,为了体现小二的“博学多才”就换个词语吧(其实想个词脑袋已经💥爆炸了)。

开发中经常使用的 <img> 瞒着你许多事情,为了防止青青草原尴尬事件一起化身名侦探对其大探秘,看它到底有多少小九九

主要讨论 img 标签 相关内容,关于图片的懒加载等优化操作并不在这展开。

alt 属性

小二在刚开始学习 HTML 的时候只会用到 <img> 的 src 属性,觉得 alt 属性 并没有什么用写起来占位置还看着不舒服。但是 alt 属性 并没有想象中的那么简单哦。

占位

为什么会觉得 alt 属性 可有可无呢?因为 alt 属性 在下面这些情况才会显示出来:

  • 网速太慢
  • 浏览器禁用图像
  • src 属性中的错误
  • 网络原因加载不到图片
  • 用户使用的是屏幕阅读器

可是平时很少会遇到这些情况并不高,所以也就没有感受到这个作用。正所谓的失去的时候,才知道要珍惜。 有的同学说:鼠标放到图片上的时候也会显示 alt 属性 中的内容。小二印象中也是这样的,可是写了个 demo 在 chrome 和 safari 都试过了放了半天都没有显示出来,不知道是不是现在浏览器都不支持这个了。

IE 是前端程序 🐒 绕不过去的一个坎。

后来查询了一下才知道 Internet Explorer 才会显示,果然 IE 在浏览器中是独一档。而另外一档的浏览器都是按照 alt 属性 的标准来实现,只有图片加载不出时才显示。除了这个 IE<img> 还有一些独一档的表现,小二还是把它绕过去吧。

SEO

SEO(搜索引擎优化)方面 alt 属性 也有一定的作用哦,虽然现在有了 AI 可以识别出图片里面的内容是什么。可是搜索引擎并没有那么聪明哦,它在理解一张图片是什么的时候会去读取 alt 属性,并且配合页面的 title、description 来组织和保存这张图片的信息。这也是为什么在百度谷歌 搜索关键词时能得到那么多相关图片的原因。

更多 SEO 相关知识可以阅读 SEO初体验H1 の 小秘密

特殊群体

对于盲人或者其他视力有障碍群体时可能看不到图片,他们可以通过屏幕阅读器等辅助工具阅读alt 属性 来理解图片内容。不过也不是所有图片都要加上 alt 属性,当装饰性和无意义的图片应该把 alt 属性 置为 防止特殊群体对页面内容产生困惑。

希望大家都能加上 alt 属性 毕竟感受不到色彩和世界美妙时,还能感受图片的内容和温度。想想自己的代码能让世界更美好了,不是一件值得开心的事情吗?

更多 无障碍阅读 相关知识可以阅读 H1 の 小秘密

塌陷

在浏览网页经常会遇到 图片 突然加载出来,导致页面闪烁和图片闪现很影响体验。这是因为图片还未加载出来并且没有被设置宽高 时,浏览器不知道这个图片到底该怎么排布和渲染它。可以利用占位图片或者设置宽高来解决这个问题,也可以使用专门解决占位的库这里推荐 Semantic UIplaceholder 组件好用、好看。

更多内容可以查阅 浏览器渲染流程

事件

图片也有着自己的事件:

事件 描述
onabort 当用户放弃图像的加载时调用。
onerror 在加载图像的过程中发生错误时调用。
onload 当图像加载完毕时调用件。

不过这三个事件并不能获取到服务端返回相关的信息,利用这三个事件可以做到:

  • 当用户放弃图片装载 和 图片加载失败的时候,可以调用占位图片来解决页面排版的问题。
  • 当图片正在加载时可以显示占位图片或者动画效果,当加载成功时关闭占位相关内容。
  • 当图片加载失败的时候重新请求图片或者给出提示。

相关操作

利用 Image 对象来获取并生成 DOM,并且利用了 crossOrigin 属性来允许跨域:

const urlToImgDOM = ({ url, alt = '' }) => new Promise((reslove, reject) => {
    let imgDOM = new Image();
    
    imgDOM.alt = alt;
    imgDOM.setAttribute("crossOrigin", 'Anonymous');
    
    imgDOM.onload = () => reslove(imgDOM);
    imgDOM.onerror = () => reject(err);
    
    // 如果图片在浏览器缓存中
    // 会不除非 onload 函数需要后置
    imgDOM.src = url;
})
复制代码

利用 DOM 来生成 canvas:

const imgDOMToCanvas = (imgDom) => {
    // 创建 Canvas 画布
    let canvas = document.createElement("canvas");
    canvas.width = imgDom.width;
    canvas.height = imgDom.height;
    
    // 绘制图片
    let ctx = canvas.getContext('2d');
    ctx.drawImage(imgDom, 0, 0, canvas.width, canvas.height);

    return canvas;
}
复制代码

利用 canvas 转 base64,注意图片要是跨域了会报错:

canvas.toDataURL()
复制代码

SEO 相关内容

一起成长

在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

  • 如果您想让更多人看到文章可以点个 点赞
  • 如果您想激励小二可以到 Github 给个 小星星
  • 如果您想与小二更多交流添加微信 m353839115

微信公众号

本文原稿来自 PushMeTop

关注下面的标签,发现更多相似文章
评论