移动端触碰一下屏幕才出现页面的解决办法
阅读:4747 次 编辑日期:2013-11-15
目录:
概述:
在手机应用开发的过程中,是不是常会遇到DOM页面不展示,但用手一碰屏幕就展示出来的问题?这类问题到底是为什么,并且又该如何解决呢?今天我们来讲一讲。
形成的原因:
遇见这类问题,绝大多数都是用了iScroll并且DOM结构复杂情况下,因为使用iScroll要尽量减少嵌套,尽量精简DOM结构,减少DOM个数,如果DOM结构很复杂并且又要循环很多回的话,
iScroll很有可能会让所加载的DOM结构的渲染出现问题。
为什么用手触碰屏幕页面就展示出来了:
因为用手一触碰屏幕,经过上下移动,触发了DOM的重新渲染。
解决办法:
在需要插入数据的DOM结构中先插入一个隐藏(visibility:hidden;)的DOM:
之后在JS插入数据的时候直接替换掉这个隐藏的DOM:
for(var i = 0; i ++; i<10){
$("#listData").html('
插入内容'+ i +'');
}
之所以这个方法能解决是因为,之前有个默认的DOM结构,虽然是隐藏的但是却占据空间,之后又没有了,DOM发生了变化,强制页面渲染,就算iScroll中的DOM渲染有问题,但是页面DOM发生了变化,又触发了重新渲染。