Items tagged: CSS

继续PMangar | PMangar Keeps Going

又是一番折腾,算是把CSS弄清楚一些了。首页和浏览页也勉强算是弄了个比较美观的UI,不过高兴的是首页顺利通过W3C认证了,无论结果如何,在过程中算是把规范弄得比较清楚了。 最新版PMangar已经上传到了ver0.003,目前实测在Kindle上依然有个内存不足的问题,虽然设法在浏览中删除了6页之外的旧内容,不过实测表明大约近20页之后浏览器会因为内存的原因重启,这时候Cache数据就完全丢失了。目前准备了解一下Javascript的内存清理方面是否还有优化空间,以及,把保留6页内的内容改成前5页外的全部清空试试。 几张截图: 顺带一提,做完这些的时候偶然在jsfiddle看到了jQuery Mobile,然后立马震精了,这货已经实现了近乎所有移动设备上的浏览器的HTML5兼容(Kindle 3赫然在其中),然后UI方面也有了很不错的兼容各种设备的设计器,不得不说对俺自己设计的想法是个巨大的打击。不过既然工具在此,就可以加以利用,之后的列表一类的功能估计就可以用jQuery Mobile来做了。

PMangar 更新中 | Upgrading PMangar

之前的十来个月荒废了太多太多,回头一想实在是愚蠢至极,随之而来的还有各种后悔。但时光已逝,无论怎样都不会复还了,所以要做的便是:珍惜今后的光阴,以活得不后悔为宗旨,尽力创造美好的生活。 嗯,跑题了,下面言归正传。近期开始各方面发奋,包括各种编程语言,于是利用改善PMangar的机会提升运用PHP乃至是组合网络编程语言的能力。这次的主要目的是恢复键盘热键的使用,以及预读取图像。 1. 键盘热键的问题是在重拾PMangar的时候发现的,那时候一开始是单纯的用本机测试,体验的时候一切正常。可是放到000上无法使用热键,而放在SAE上却可以。那时候并没有深入研究,以为是服务器端的限制导致的,就没有研究了。后来在给漫画预览界面添加封面图的时候又遇到了这个问题,000上死活读不了,而本机和SAE都能正常显示。于是翻来覆去折腾的过程中,一次偶然的机会试了一下源代码中pic.php的地址,发现是个死链,点开会跳到404。 问题就这么找到了,在http://rotar.tk/pm/pm.php中用来fetch图像的pic.php的链接部分原本是缩写成了”/pic.php?url=*****” 这在IIS(本机)和SAE上的实际结果都是 ”http://rotar.tk/pm/pic.php?url=*****“ 而到了000那里就被解读成了 “http://rotar.tk/pic.php?url=*****“ 于是文件不存在,自然也就无法用来取图。去掉那个斜杠,也就是更正为”pic.php?url=*****”之后,缩略图的显示就全都正常了。 热键使用的key.php也是因为同样的原因而失效,这个问题直到4小时前才被发现及更正。   2. 图片预读的办法 主要有两种: 一种是利用Javascript建立Image对象然后对图像进行载入,之后在网页中插入。 而另一种,也是目前在PMangar中采用的方法是利用CSS。原理是利用CSS的background-image来读取图像并且将这个div设置为0x0的大小,于是图像就在读者看不到的情况下载入了。 这里要提一下的是多个图像的地址只需要用逗号隔开就行了,如下:

Javascript部分就比较简单了,沿用之前的document.onkeydown的函数,给了图片一个id(例:pic)然后用getElementById的方法获取,直接pic.src = XXXXX (下一张图的地址)就可以了。链接和标题之类的也是利用Javascript进行修改的,唯一花了点心思的地方是把图片的链接字符串组从PHP搬到了JS的Array里,然后在JS中利用变量进行索引从而达到不刷新页面就能全部浏览的目的。 大概就写这么多了OLO,时间不早,在折腾会儿就水饺了,希望上文能够在今后给意外点进本文的童鞋一点帮助。 ——Edit 折腾了一段时间,发现3G下图像的尺寸老是有缩水(WiFi无影响),发现貌似是Kindle升级到3.3了之后才产生的问题,不清楚是本地的浏览器配置的改变还是Whispernet代理服务器搞的鬼。于是还在想办法中,最好是能在Kindle本地解决。