1、背景
使用react混合开发移动端时,在主页上有多个空数据占位图,在加载时显示loading,加载完成后没有数据显示图片。在IOS端H5页面的图片偶尔加载失败
2、代码写法
<div>
{loading ? <Loading/> : <img src='xxxxx' alt='暂无数据'/>}
</div>
3、问题
用户在APP主屏上的 主页、个人中心 之间快速切换,img有的时候会加载失败,显示alt的内容。在IOS出现,在android无法复现。
4、原因
是因为用户在频繁切换的过程中,主页上的img标签还没加载完成,就切换到了个人中心,导致主页渲染中断。相当于在浏览器访问,页面还在加载,就强行 停止加载页面 一样的效果;
5、解决
不要动态渲染节点,通过样式控制显示隐藏,所以代码改写为:
<div>
<div style={{ display: loading ? 'block' : 'none' }}>
<Loading/>
</div>
<div style={{ display: loading ? 'none' : 'block' }}>
<img src='xxxxx' alt='暂无数据'/>
</div>
</div>
6、备注
在页面数据频繁更新或者页面频繁刷新的地方,少用 通过条件动态渲染节点的写法,减少渲染成本,降低出错概率。