性能优化之图片占位，减少重排重绘

bigtree
699 阅读1分钟

性能优化之图片占位，减少重排重绘

先举一个例子，直观的体验一下。如果图片不设置占位，会多影响布局？

此处会抖动3次，分别依次如下：

<div style="display: flex">
  <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9991b325d7084b8f81c43b4e0117a30a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?">
  <img src="https://tools.jiyik.com/demo_source/demo2.jpeg">
</div>
<h1>123</h1>

image.png

image.png

image.png

优化后的目标是

  1. 文字123 一开始就在对的位子上，不应该一上一下抖动
  2. 第一张图片，不应该被挤变形，不应被迫变大或变小

做法

  1. 拿到图片真实的width，height （如果不知道如何得到图片的宽高，看下面）
  2. 在<img标签上加上width，height
    • 也可以自己等比例缩放图片的宽高。比如 1920x1080的图，我们也可以写成 960x540 如下：
<div style="display: flex">
  <img width="378" height="374" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9991b325d7084b8f81c43b4e0117a30a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?">
  <img width="960" height="540" src="https://tools.jiyik.com/demo_source/demo2.jpeg">
</div>
<h1>123</h1>

效果链接（可以强刷试试）：js.jirengu.com/xugew/4

如何得到图片的宽高？

  1. 让接口返回（CMS架构比较常见）
  2. 图片的url上 就带上宽高信息（query的形式）**，比如 url + ?width=960&height=540 ：tools.jiyik.com/demo_source… 然后前端<img部分要自己去处理
  3. 自己用开发者工具去查宽高（如下），然后写死在<img上。这种只适用于 图片本身也是写死的情况，或应急情况
  • image.png

懒加载图片如何支持图片占位？

case1：如果懒加载无需设置默认图（默认图是：比如懒加载的图片还没加载出来时，先展示logo图，提升用户体验），那么直接上面的做法即可

case2：如果懒加载需要默认图，那么就会出现一个问题

  1. 如果默认图用background-image实现，那么<img 的src会是空的，设了宽高属性后，图片会出来裂图。体验不好 image.png

  2. 如果src填入默认图，那么<img 上设置的宽高属性 会被默认图的宽高比例给影响，导致达不到占位的效果。并且直接在style里写死 width和height 也不太好

解法 !

用自定义svg图片撑开宽高

// 用自定义svg图片撑开宽高,
const svgEncodeStr = encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${props.width} ${props.height}" width="${props.width}" height="${props.height}"></svg>`)
// 手动转成base64后
const svgEncodeStr = `%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20${props.width}%20${props.height}%22%20width%3D%22${props.width}%22%20height%3D%22${props.height}%22%3E%3C%2Fsvg%3E`

// 最终放到img标签上的效果:
<img :src="svgEncodeStr" width="props.width" height="props.height" > 在结合background-image渲染默认底图

---- 码字不易，点赞鼓励！！ ----

avatar
文章
阅读
粉丝