标签为: "前端开发" 的文章

解决IE6背景图片不缓存的BUG

IE6在背景图片缓存上有一个bug:它会每次都从服务器端读取背景图片。例如我们使用a:hover更换背景图片,在IE6下会出现每次鼠标滑过则重新向服务器请求图片,如果服务器反应较慢,那么hover效果就会出现短暂的空白,令人极度不爽。虽然可以通过CSS sprites的方式解决问题的,但效果差强人意。

示例:
a{ background:url(normal.gif); } a:hover { background:url(hover.gif); }
如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果,在firefox下是没有什么问题的,第一次加载之后,浏览器都会从缓存读取背景图片.

解决方法

具体的解决方法就是在页面中加入一段简单的javascript脚本,告诉IE6:本地有背景图片的话就不要麻烦服务器了。 document.execCommand("BackgroundImageCache",false,true);

关于这段脚本的放置方式有两种:

阅读更多…

2010年6月21日

前端开发常见图片格式详解

前端开发设计,打交道最多的就是图片啦~今天就来个图片格式讲解,也许一些围绕你的问题可以在这篇文章中找到答案

Gif格式图片的特点

透明性

Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha 透明)。

动画

Gif这种格式支持动画。

无损耗性

Gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使  得图像质量产生损耗。

水平扫描

Gif是使用了一种叫作LZW的算法进行压缩的,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小

间隔渐进显示

Gif支持可选择性的间隔渐进显示

由以上特点看出只有256种颜色的gif图片不适合照片,但它适合对颜色要求不高的图形(比如说图标,图表等),它并不是最优的选择,我们会在后面中看到png是最优的选择。
阅读更多…

2010年6月19日

Img,Script,Link等标签为空可导致页面多余请求

把页面中的img,script,link等标签为空链可以导致页面多余请求的问题,包括IE,Firefox,chrome,Safari!但是相对于img,script跟link的src、href为空时,在IE下不做请求,而Chrome, Safari, 和 Firefox则会出现一次多余的新请求。下面详细讲解一下:

img src为空的情况分析

无论是在html中写入<img src='' />还是在js中通过Image对象建立var img = new Image(); img.src = "";,都会导致向你的服务器多做一次请求。而具体请求的情况分析如下:

  1. 在IE中,这样做会请求一次当前页面所在的目录。如在http://js8.in/demo/a.html 中出现这种空src的标签,会导致重新请求一次:http://js8.in/demo/
  2. 在Safari 和 Chrome中,将请求当前页面本身。
  3. 在Firefox 3.5以前的版本中,有和Safari同样的问题,但是在3.5中修正了这个BUG。
  4. 在Opera 中,不会做额外的请求。

阅读更多…

2010年6月18日