这篇文章上次修改于 5 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。
如今图片懒加载已是家常便饭,然而一般的图片懒加载的占位往往不跟随原图片的大小,导致图片加载完成后,总体的位置会改变,体验很是不好。相信大家都看过知乎或者 Medium 之类的图片加载方式,从开始加载到完成加载,占位始终在一个地方,再加上平滑的过度,视觉上很舒适。
于是我今天尝试将图片懒加载也做成这样,但是有一个问题,我所有文章中的图都不在本地,而是分布于各个图床,甚至有些还失效了。我开始尝试在前端处理,图片在开始加载的时候是能在加载完成之前获取到图片头部的相关信息的。但是有个问题,这样的话还是做不到平滑过度。
于是,放弃了一个下午的研究成果,开始重做后端。在后端模型中,我加入了一个新的字段,用于记录图片的各种信息。每篇文章可能不止一个图,所以应该是一个数组。
之后,把所有文章中的图片链接提取出来,然后去请求数据,在分析图片并记录到数据库,这样的话,只需要一次操作就行了,之后文章更新额时候在触发一下钩子。

后端

下面代码以 NestJS, Typegoose 为例
提取 markdown 中的图片链接
获取图片并分析, 用到了 NestJS 的 http 模块和 image-size
存到数据库
因为有些图片可能 404 了,或者网不好(国内直连 https://raw.githubusercontent.com/),所以如果报错也要 push 一下,全为空就行了,前端到时候在处理一下。
最后把所有 model 都执行一下这个方法。

前端

前端部分以 React 为例。
处理完之后,后端返回的数据中多了一个 images 字段,如。
前端在渲染图片之前先要根据实际大小计算出渲染到页面中的尺寸,然后定死 placeholder 的大小,在图片加载完成之后移除或者隐藏 placeholder。
计算尺寸可以参考,如下
因为 Markdown 渲染的结构比较复杂,我所以我使用了 Context 进行传值,我使用的渲染库是 react-markdown,可以对每个 tag 进行自定义渲染。
完整的 Image 组件可到 查看。包含了图片的过度动画。

亲亲留个评论再走呗

正在加载评论区...