每日 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 UI 的 placeholder 组件好用、好看。

更多内容能够查阅 浏览器渲染流程。

事件

图片也有着本身的事件：

事件	描述
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 相关内容

• H1 の 小秘密
• SEO 初体验
• img の 小九九
• 千里姻缘一线牵
• 投怀送抱
• 漫游器法则

一块儿成长

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

• 若是您想让更多人看到文章能够点个 点赞。
• 若是您想激励小二能够到 Github 给个 小星星。
• 若是您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop