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

1次阅读

共计 1463 个字符，预计需要花费 4 分钟才能阅读完成。

产品呈现的问题:
braft-editor 生成的 htmlstring 格局富文本内容，经由 react 中的 dangerouslySetInnerHTML 不做解决间接展现时，img 的呈现会很突兀。

我最终的解决方案：
加载富文本内容时，图片优先申请了含糊版，起到了即刻占位的作用，随后富文本内容的图片清晰版通过 filter 动画逐步出现。

插件:

感激简书 https://www.jianshu.com/p/366…
提供的思路。这个插件能够适当自定义 htmstring 的理论渲染规定，比方把 img 替换成 react 组件。
【额定的】
须要上面的条件把文本内容间接返回，详见其 npm 的形容文档。

else if (typeof props === "undefined") {return <>{ nodeName}</>;
}

一个图片渐进式含糊加载的插件，参见我上一则帖子
www.v2ex.com/t/818727
因为落实上述计划的我的项目，在图片资源方面，能够相似阿里云的 OSS 那样在图片地址前面加 w /40/h/50 这样的宽高参数取得指定尺寸图片，我再通过 css 放大成原图须要展现的大小便能取得含糊版。
【额定的】
如果图片 404 了，这个插件会保留 filter: blur(10px); 的款式，如果想替换或者移除，我给该插件 render 属性里的 img 加了这么一段

onError={(e: any) =>{
    e.target.onerror = null;
    e.target.style = "filter:none;"
}}

相干局部的代码：

import htmr from "htmr";
import ProgressiveImage from "react-progressive-image-loading";
const transform = {_: (nodeName: any, props: any, children: any) => {if (nodeName == "img") {
            let itemSrc = props.src;
            let itemStyle = props.style;

            return (
                <ProgressiveImage
                    transitionTime={1800}
                    preview={`${itemSrc}?op=thumb/fit/w/${itemStyle.width / 24 || 40}/h/${itemStyle.width / 24 || 40}`}
                    src={itemSrc}
                    render={(src, style) => (
                        <img
                            src={src}
                            style={Object.assign(style, {...itemStyle,})}
                            onError={(e: any) =>{
                                e.target.onerror = null;
                                e.target.style = "filter:none;"
                            }}
                        />
                    )}
                />
            );
        } else if (typeof props === "undefined") {return <>{ nodeName}</>;
        }

        return React.createElement(nodeName, props, children);
    },
    
};
……
// 渲染局部
{htmr(某个 htmlstring 变量名, { transform})}

题外话总结:
幸好工时足够，无意间组合出了百度能查到那则简书后果的关键词，因此破了局。此前，机械性的尝试了本人用原生 js 拿到 htmlstring 渲染后的 dom 进行操作。
（orz 忍住没在摸索阶段就摆烂在 v2ex 发帖求助，本人找到了）

正文完