主要介绍内容
- 为什么要阻止图片加载时刷新
- 图片加载时刷新的原因
- 如何避免
为什么阻止加载刷新 | 加载刷新的原因 |
---|---|
例如:我们需要提交一个表单,表单里包含了姓名、性别等信息。还有上传个人头像的按钮,并且上传头像之后,头像会被显示加载,存在临时文件夹下面。这时,我先填写姓名、性别等信息,再上传图片,页面就会被加载(onLoad),导致我刚才输入的其他一些信息被重新刷新回原来的数据,从而带来不好的用户体验。(因为我在onLoad里,设置了渲染该页面的数据。所以具体情况,读者自己分析) | 图片加载刷新,是因为onLoad的属性是监听页面加载,也就是页面上的数据有所变化的时候,该方法就会执行一次,导致刷新,这其实也算是一个小坑😀 |
解决办法(就一句话)
把放在onload方法里的与页面数据渲染相关的代码放到onReady里,因为onReady是监听页面初次渲染完成执行的。只显示加载一次,不会随着页面数据的变动而更新。
注:写下此篇 boke,是因为之前在遇到这个坑的时候,没能在各大平台找到合适答案。最后自己想明白了,方法很简单,但是对页面生命周期不很理解的伙伴也许还真的就有那么一点难,最后希望我们都能少趟一点坑吧!