uniapp的富文本标签使用图片懒加载

Posted 2023-05-11

参考技术A halo~大家好.最近使用uniapp开发了小程序,引入了框架为 uView .
商品详情页的图片,是采用富文本标签进行返回,但是考虑到网络优化,需要做一个图片的懒加载

先使用正则表达式,获取所有图片地址,然后push到richTextList数组中.
接下来使用uView的组件<u-image>进行循环渲染即可.

uni-app图片未加载完处理

参考技术A 1.图片未加载完看到的是 .new-img占位背景图片,.new_back透明度设置0;
2.图片加载失败显示设置的 loadImg 失败占位图片
3.图片加载完直接显示完整图片同时添加类名. loaded透明度设置1;