Jquery mobile pageInit vs pageshow 事件

 

http://api.jquerymobile.com/

 

 

http://www.verydemo.com/demo_c226_i233.html

jQuery Mobile 初期化事件有mobileinit,pagebeforecreate,pagecreate,pageinit这个4个事件。本文尝试总结和比较4个事件。

事件触发顺序

第一个触发的事件是mobileinit，其次pagebeforecreate，再次pagecreate，最后pageinit。
mobileinit -> pagebeforecreate -> pagecreate -> pageinit。

mobileinit

jQuery mobile加载时最先触发的事件。
绑定此事件的JS代码，应该在jQuery之后，jQuery mobile之前。

 

0 1 2 3 4 5 6

<script src="jquery.js"></script>  <script> $(document).live('mobileinit',function(event){ // .... });  </script>  <script src="jquery.mobile-1.0.1.min.js"></script>

因为Document还没有加入到DOM树中，mobileinit事件中对html的操作是徒劳的。

pagebeforecreate

页面的DOM加载后，DOM初始化之前 触发的事件。

 

pagecreate

这个事件，在HTML已经在DOM中建立完成，初始化也完成，但在展开widget之前触发的事件。

pageinit

 

展开完成后触发的事件。是jQuery mobile中的$(document).ready()。

 

http://forum.jquery.com/topic/pageinit-vs-pageshow

pageinit = when the page loads
pageshow = when the page shows

Pages only initialize once but they can show many many times as you toggle them into and out of view.

http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

 

 

 

http://www.mansonchor.com/blog/blog_detail_62.html

 

jquery mobile使用心得

manson 发表于 2012月03月23日 00:13, 分类: 移动端 标签: jquery mobile web app

jquery mobile是一个好框架，虽然我没用过Sencha Touch，但据说学习成本要比jq mobile大很多，从目前web app ui框架选择少的情况来看，jq mobile是最好的选择。

jquery本身已是一个成熟的框架，jq mobile作为它的附属，继承了 write less,do more 的传统。

但是作为一个新兴起的项目，毛病也是有不少。我在运用到项目中时，发现了如下问题并积累了下解决方法。

 

1.页面转场时，当前页会先回到顶部，再跳转到目标页

相信在jquery mobile 1.1.0 版本出来之前，每个人都会遇到的问题。页面短的还好，假如页面内容很长，每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作，更可怕的是当你返回上一页时，jquery mobile会恢复你上次浏览的位置，滚动条又从顶部跳回你之前的地方。

这种页面的错顿感严重影响用户体验，特别是在android的手机上。各种搜索引擎无果后，曾经我避免把页面长度做得超过1屏，也尝试修改jq mobile的源码（但效果不好），折磨了一段时间后，迎来了jquery mobile的更新，然后 1.1.0版本解决了这个问题。

所以如果还被这个问题困扰的同学们，赶紧去下新版的jq mobile。

 

2.页面转场闪屏问题

在页面转场时，页面内容经常会闪动，特别对于slide效果，fade的话没那么严重但也还是会觉察到闪动。这对于用户体验是致命伤，原因是手机浏览器对于css3的支持还不算太好。解决的方法就是让页面转场效果进行的时候，先将内容背景隐藏，加上下面的一段CSS

/* fixed闪屏 */
.ui-page {
    backface- visibility : hidden ;
    -webkit-backface- visibility : hidden ; /* Chrome and Safari */
    -moz-backface- visibility : hidden ; /* Firefox */
}

需要注意的是你的jquery最好使用 1.7.1或以上的版本，否则有上面的css也可能还是会闪屏。

1.7版的jquery加多了对CSS3的支持和兼容，可以说是为移动端而设计的，假如你正在开发web app，有什么理由不用它呢？

 

3.position fixed问题

jquery mobile在1.1.0版本之前，是无法真正实现fixed效果的，在header使用fixed的时候，拖动页面你会看到header一闪一闪的跟下来，这实际是使用js实现header置顶的。

1.1.0版推出后，jquery mobile声称他们真正的实现了header fixed，确实从外观效果来看，是和fixed无异了，我们也用得很爽。

但在这里我要说明了，真正意义的css  position:fixed，只有在IOS 5才支持，IOS 4和android各版本的浏览器都是不支持的（其它手机操作系统的浏览器我没试过）。这就跟IE6对position:fixed的情况类似的。jquery mobile能够把header和footer做成fixed是它本身框架的UI功能，并非解决了浏览器的兼容问题。

所以如果你正在做一个项目，设计里面有很多需要fixed去实现的效果，建议你还是和设计师们谈谈吧。否则你将会面临痛苦的兼容问题，我是有深深的感受阿。

 

4.页面page控制、缓存问题

jquery mobile的页面机制主要分两种，一是单页，而是多页。

单页就是你在一个 html页面里面把所有需要用到的page都写在里面了，这个时候页面之间的转场一个可以靠 a标签里的href，里面是想要转到页面的ID

< a href = "#page_id" ></ a >

单页里面写到的page都会一直存在于dom中，所以不存在缓存的问题，页面转换时也不需要ajax去获取新加载页面的内容。缺点就是当需求比较多时，在一个html页面写完整个app需要的page和相应的js，页面会显得臃肿而且不好维护。

那么我们更多的是使用多页的机制，把每个page独立写到不同的html页面里，在需要转到对应页面时，才通过ajax去获取页面的内容和js，这样使我们的app代码部署就如我们网站开发一样，一个页面一个html文件。

这样就会存在一个问题，因为每个page不像单页一样写在一起，jquery mobile的机制只会把需要显示的page加载到dom里面，当离开这个page时，会自动把这个page的dom清除掉，假如你想要保留这个page在dom里，以后再次显示，需要加上 data-dom-cache="true" 一属性

< div data-role = "page" data-dom-cache = "true" >
   page内容
</ div >

解决了page缓存的问题，那么又会遇到page里的js问题。例如我希望把page的dom缓存下来，但是我又希望每次这个page显示的时候，触发执行一些js，那么这个时候我们在对应page的事件处理时，就不能用 pageinit而是要用pageshow了，因为pageinit只在这个page从dom加载进来时触发，如果page缓存了，那么pageinit只会在第一次时触发。

$( '#page_id' ).bind( 'pageshow' , function (){
    //页面每次显示你需要做的
})

除了pageshow，还有pagehide、pageremove、pagebeforeshow、pagebeforehide等等事件响应，都是可以针对不同的需求使用的。


这篇文章是一个月前就开始写的了，因为最近工作实在太忙，到今天才完成，博客也很久没发新文章了。这次项目让我对移动端开发积累了许多经验，等忙完了会把经验全部分享出来的。