富文本生成的htmlstring在展示端进行图片loading预占位的一种实现方案

显示端富文本生成的htmlstring图片加载预占的实现方案img的出现会很突兀。我最终的解决方案：在加载富文本内容时，先请求模糊版本的图片，作为直接占位符，然后通过滤镜动画逐渐呈现带有富文本内容的清晰版本的图片。插件：（1）htmr感谢简书提供的思路https://www.jianshu.com/p/366...这个插件可以适当自定义htmstring的实际渲染规则，比如用react组件替换img.【补充】需要满足以下条件才能直接返回文本内容，详见其npm说明文档。elseif(typeofprops==="undefined"){return<>{nodeName};}(2)react-progressive-image-loading一个渐进式模糊图片加载的插件，见我上一篇文章www.v2ex.com/t/818727由于实现了上述方案的项目，在图片资源方面，可以在图片地址后添加w/40/h/50等宽高参数，获取指定大小的图片类似阿里云的OSS。然后通过css放大到原图需要显示的大小，得到模糊版。[额外]如果图片是404，这个插件会保留滤镜：blur(10px);style，如果要替换或者去掉，我加了这么一段onError={(e:any)=>{e.target.onerror=null;e.target.style="filter:none;"}}代码的相关部分：importhtmrfrom"htmr";importProgressiveImagefrom"react-progressive-image-loading";consttransform={_:(nodeName:any,props:any,children:any)=>{if(nodeName=="img"){让itemSrc=props.src;让itemStyle=props.style;返回(({e.target.onerror=null;e.target.style=“过滤器：无；”}}/>)}/>);}elseif(typeofprops==="undefined"){return<>{nodeName};}returnReact.createElement(nodeName,props,children);},};...//渲染部分{htmr(ahtmlstringvariablename,{transform})}题外话总结：还好工作时间够，不小心把百度能找到结果的关键词结合起来短书，从而打破了游戏。在此之前，我机械地尝试过使用原生js获取htmlstring渲染之后的dom来操作。更新，htmr插件被替换为html-react-parser。我自己的项目后来发现有个uniquekey错误没有解决。问题确实是htmr插件渲染出来的内容有唯一键错误。实在想不通，现在换成html-react-parser