Base64 格式图片插入 DOM 卡顿解决方案
背景
在某些场景下我们会遇到将一张被转为 base64 编码的图片插入到 DOM 树中的需求。例如以下操作:
const b64str = 'blablabla'
const img = new Image()
img.src = b64str
document.querySelector(dom).append(img)
如果当这个图片很大导致 base64 编码的字符串过长,在插入 DOM 的过程中难免会造成 UI 上的卡顿。尤其是在当下,各种 UI 框架盛行,DOM 节点乱用滥用使得大部分网站的 DOM 树过深过复杂,插入一个过大的 DOM 节点势必会影响用户体验。
解决方案
我们可以将 base64 字符串转为 Blob
对象,并生成指向该对象的 URL。
我们将使用到两个 API:
- fetch(resource, init)
- URL.createObjectURL(object)
fetch 自然不用多说,先简单介绍一下 URL.createObjectURL(object)
。其参数 object 类型可为 File、Blob、MediaSource。返回值为 DOMString 类型,代表指向 object 的一个 URL。
返回值:
A DOMString containing an object URL that can be used to reference the contents of the specified source object.
具体实现方案:
fetch(b64str).then(data => data.blob()).then((b) => {
const url = URL.createObjectURL(b)
const img = new Image()
img.src = url
document.querySelector(xxx).append(img)
})
可以封装成小函数:
function insertB64Image(b64str, targetDOMSelector) {
return fetch(b64str).then(data => data.blob()).then((b) => {
const url = URL.createObjectURL(b)
const img = new Image()
img.src = url
document.querySelector(targetDOMSelector).append(img)
})
}
兼容性是 IE11 以上的浏览器可以完美使用,也就是说现代化浏览器是完全不用担心兼容性问题的。
原理
解决方案的原理非常基础,其为
- 使用 fetch 直接请求 base64 图片资源,将返回值转换为浏览器资源 Blob 对象;
- 生成 Blob 对象的 ObjectURL,并将其作为 Image 对象的 src 属性;
- 在 DOM 指定位置插入 Image 对象。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于