像博客这类内容类网站，对图片的处理一直是一个很费心思的问题，因为在很大程度上，图片是网站流量消耗的大头，也是用户进入网页时，对用户体验有很大影响的部分。如何良好的对图片进行预处理，存储和读取是每个前端开发人员的必修课，现在大部分网站都对图片进行了懒加载处理，对于体积较大，较为高清的图片，也都需要生成缩略图来防止用户长期白屏，造成体验问题，当然无论如何，图片在加载时，图片区域的占位符是用户能最先看到的部分，该怎么去处理才比较合适呢?
占位符的常用解决方案
图片在页面内一般分为ui部分和内容部分，对于ui部分的占位符处理，一般都是空白类似于骨架屏那种，这样避免了满屏都是转圈或者各种奇怪占位符情况的出现
而对于内容部分的图片，往往有几种解决方案，一种的学习UI用骨架屏来解决，在图片加载过程中，显示一片单一颜色区域，辅以简单的呼吸动画，这是本站以前的解决方案，效果还可以，并且代码量较少，我们在contentloaded后，对页面内的懒加载图片进行src的替换即可，也可以在本地渲染阶段对图片进行替换，用一张空白的透明图占位，在通过设置背景颜色的方法显示骨架的样式
第二种是上一种的升级版，也是本站目前采取的方案，对内容部分的图片，依旧是替换为透明图占位，但是背景不再是简单的单一颜色，而是设置一张矢量的代表图片的矢量图，让用户一眼就能知道这里有一张图片正在加载
第三种是比较常见的，转圈法，一般是通过背景图片或者src替换的方式，放一张加载中的gif，但由于响应式或者gif体积及效果的问题，也会有采取遮罩显示css加载动画的方案，这样加载效果会有所提升
透明占位符的选择
对于透明占位符，你可能在很多网站都见过下面这段代码：
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
这是一张最小的gif透明图片的dataURI编码字符串，能够很轻松的写入图片的src中进行替换，这也是很常用的方法，但这种方法在实际应用过程中会存在一个棘手的问题——页面抖动问题，因为内容部分的图片的大小是各异的，往往不像UI那样固定了大小，或者随着父级大小改变，不要求长宽比的固定。而以上代码的图片长宽比固定在了1：1，这意味着即使你在图片中写入了width和height，由于内容图片常见的使用max-width + height:auto来进长宽自适应，会导致在加载时占位符不会按照你设置的长宽来自适应，而是继续使用1:1的比例(在没有使用aspect-ratio的情况下)
aspect-ratio虽然好用，但它的兼容性让人很担忧，所以只能抛弃这一方案了，偶然一次在查询MDN关于lazy-load的描述时，在其指向的一个polyfill的源码仓库看到了以下代码：
const blankImgWithSize = (w, h) => {
const temporaryImage = `data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27` +
`viewBox=%270 0 ${w} ${h}%27%3E%3C/svg%3E`
return temporaryImage
}巧妙的利用了svg图片的viewBox来自定义透明图片的长宽，这样我们就能设置一个与原图片长宽相同的占位图，避免了页面的抖动