有种看法认为对于移动设备用户，是非常讨厌splash屏幕的，其实我自己正是这样。但是对phonegap及jquery，css3，html5等结合作移动开发来说，由于性能一向都是个问题，所以在等待程序或页面装入的漫长时间里，splash屏幕对提高用户体验，反而会起到正面效果。被Adobe收编的Dreamwaver在5.5版本里能够集成PhoneGap框架，然后生成移动设备应用。可以看到，在生成的phonegap程序stub里，已经有了splash屏幕代码：
super.setIntegerProperty("splashscreen", R.drawable.splash);
当然，在res内各分辨率的图片夹里，splash.png已经存在了，究竟是否分辨率不同就需要放入不同尺寸的图片，尚无时间研究。目前这三个目录里的图片都是同一张320X480的图片，据某文声称分辨率不同图片尺寸有如下标准：
xlarge: at least 960 x 720 large: at least 640 x 480 medium: at least 470 x 320 small: at least 426 x 320
暂无暇顾及。也许之前在DW 5.5输出apk时设置过目标设备屏幕？记不得了。不过这不是什么大问题。可将这些图片用自己的png图片代替，能否用其它格式如jpg等？我也想知道，待会儿再查吧。
在装入页面的语句里：
super.loadUrl("file:///android_asset/www/index.html", 1000);
后面1000ms即为splash的延时时间。若不想延时，也有loadUrl(URL);形式方法提供。
运行，可看到splash屏幕正常出现。
而jquery也有自己的splash屏幕机制，当然用jqeuery可自行实现，但插件Meerkat会让你更方便一些。
下载http://meerkat.jarodtaylor.com/download/jquery.meerkat.1.3.min.js 将之嵌入自己的页面。然后：
1 确认页面内有$(document).ready(function()事件处理
2 页面html部份的末尾加入
<div class="meerkat"> Meerkat content goes here </div>
这对jquery架构的页面来说毫无问题。
3 下面就简单了，将
$('.meerkat').meerkat({
background: 'url(images/meerkat-bot-bg.png) repeat-x left top',
height: '120px',
width: '100%',
position: 'bottom',
close: '.close-meerkat',
dontShowAgain: '.dont-show',
animationIn: 'slide',
animationSpeed: 500
});
加入ready事件处理，通常会在最前面。注意中间的属性，这个插件支持各种各样的位置与特效。若无background，则与为background: null。height 和width 若均为”100%”，则为全屏的splash屏幕。
运行，亦可正常显示。
但对项目来说，恐怕还是phonegap的splash意义更大一些。因为它用本地代码来实现，优先级要高于webview里的splash。且webview要装入许多代码之后才会触发ready事件，此时显示splash已经迟了。且由于用页面实现，若改变了webview的外观，如给默认的webview显示了滚动条，那么splash屏幕就露馅儿了。
实际测试结果亦是如此，phonegap的splash与内容装入衔接的很好，splash消失，页面出现。
原创文章，作者：苏葳，如需转载，请注明出处：https://www.swmemo.com/379.html
