Archive for the ‘(X)HTML/CSS’ category

HTML5特性——prefetching预加载功能

June 8th, 2010

HTML5的一些特性还是比较令人兴奋的,应该说是将这么多年来大家常用的技术或者迫切需要的技术都标准化了,甚是方便。

比如本文要介绍的HTML5的这个特性,就是从我们平常开发的预加载图片延伸出来的:预加载功能。

预加载图片,在当前页面预先加载下个页面需要的图片,以加快下个页面的访问速度,比如Google的首页就会预加载在搜索结果页面需要的图片。

而在HTML5中支持预加载功能,实现起来也是相当的简单,只要一段代码,而且是基于我们很熟悉的link标签实现:

<link rel="next" href="page2.html">

这样的话,浏览器就会在空闲时间(不会占用页面的加载时间)去自动下载page2.html这个页面,这样当用户点击进入page2.html页面是,浏览器就会从缓存中读取这个页面,从而加快页面的访问速度。

当然,这样的一个特性,很大程度上要基于网站的用户行为分析才能进行,否则的话效果会适合其反,预加载了一堆无用信息,浪费了带宽。

目前为止,只有Firefox支持这个特性,但是这个实现过程真是太简单了,就让我们临时无视其他浏览器吧哈哈

以下是一些使用的方法:

  1. 任何时候你打算将内容分割成多页时,比如一篇巨长的文章,在线的教程,或者图片幻灯片等等
  2. 在你的主页你可以加载你的用户可能会点击的页面内容(比如你的产品特色介绍,或者你最新的博客日志等等)
  3. 在搜索引擎可以预加载一些热门的搜索结果等等

当然,除了可以预加载页面,我们也可以使用这个特性预加载一些静态内容,比如图片,css文件等等

仍然是使用link标签即可以实现,很方便吧

<link rel="prefetch" href="/images/big.jpeg">

一些其他有趣的观点:

  • Opera, Chrome, Safari可能不久后就会支持预加载特性,但是,IE的话,可能得到2020年也说不定了。
  • 如果这个特性使用频繁的话,极有可能去影响网站的访问日志和统计的。

设想有一堆预加载请求你的某些页面时,但是用户并没有真正的去访问这些页面,对于服务器(或者统计系统)来说,并不知道区别。

为了解决这个问题,Firefox在发出这些预加载请求时,会发送x-moz: prefetch的header信息,但是你需要在服务端做一些逻辑处理来检测这些请求。

更多的预加载相关资料和文章,可以访问https://developer.mozilla.org/en/link_prefetching_faq

Ref:http://keyboardy.com/programming/html5-link-prefetching/

  • Share/Save/Bookmark

firefox的标准引起的一些问题

October 19th, 2009

html结构为

<table><form><input type=”text”t name=”author[]“></form></table>

恩,提交处理什么的都没有问题

但是用js再在table中插入一个input的话,发现提交时没有插入的input的值

解决办法:

将form放到table外,变成

<form><table><input type=”text”t name=”author[]“></form></table>

就可以解决了,

当然,对称一点就是

<form><table><input type=”text”t name=”author[]“></table></form>

这样处理,发现也可以解决用jquery filestyle模拟的file提交时获取不到的问题

所以说。。。一定要符合标准吖

———-以上bug只在firefox体现,在ie可以兼容———

  • Share/Save/Bookmark

IE7下的iframe出现边框

October 30th, 2008

加了border-style:none后在IE6,FF都没有边框了,唯IE7还有

需要增加frameborder=”0″才能解决IE7里的边框

sigh….

  • Share/Save/Bookmark

Dips2:GBK->UTF-8项目转码过程中需要注意的问题

August 28th, 2008

1.UTF-8分BOM和No BOM两种(某记事本++可以转换)
PS: 有BOM会引起COOKIE操作报错
PPS: 据不完全统计,notepad另存为的是有BOM的,Editplus另存为的是No BOM的

2.CSS没转换成UTF-8的话会在IE6显示不了,其他浏览器似乎不受影响

  • Share/Save/Bookmark

Firefox中radio无法选中的问题

August 15th, 2008
<td bgcolor="#FFFFFF" class="padding_all6">
<label><input type="radio" name="ishui" value="1" style="vertical-align:middle" {$ishui}/>
是
<input type="radio" name="ishui" value="0" style="vertical-align:middle" {$nothui}/>
否</label>
</td>

恩,根据数据默认选中某个值,结果在FF下发现就一直是处于默认选中的那个值,无法选择另一个radio
换IE却没发现有类似问题
以为是默认的checked在作怪,去掉后FF还是出现无法选中另一个囧rz
百度一下,原来是<label>标签在作怪。。。。果然换了2个<label>就正常了。
(Read More)

  • Share/Save/Bookmark