解决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);

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

引入CSS 的两种方式:link和@import的区别

引入css外部文件的两种方法为在html页面通过link,src属性(注意空链接时的陷阱!),再者是通过CSS文件本身通过@import url()引入,虽然这两种方式都可以加载进来CSS文件,可是link和@import也存在着细微的差别。

隶属上的差别

link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。此处注意浏览器的link src为空时候时会导致页面加载次数增多

@import次数限制

传闻在IE6下,@import只能引入31次css文件,可是可以通过在css文件中再次import来垂直扩展,断桥残雪没有测试过,不过如果出现这样的情况,说明这个写代码的人也挺变态的。

加载顺序的不同

当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS文件会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式,然后突然样式会出现,网速慢的时候还挺明显,@import这点跟把CSS文件放在页面结尾效果相同,不过如果我们一些样式开始页面并不会出现,而是在交互时才出现的CSS样式,可以通过这个方法引入,时间上错开。例如:Ajax的html,交互时的弹出框,弹出div等

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

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

Gif格式图片的特点

透明性

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

动画

Gif这种格式支持动画。

无损耗性

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

水平扫描

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

间隔渐进显示

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

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

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 中,不会做额外的请求。

解决IE6 select z-index无效,遮挡div的bug

在最近的一个项目中,遇到了IE6 select遮挡div的bug,为了解决这个bug我查了很多资料,试图找到一个最最有效的方法,很多人是通过iframe的方法来解决,其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。

解决方法之一:Iframe包裹select元素

使用iframe包住select,这样iframe有z-index,只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性,不可能每个select都要加个iframe吧?所以不推荐!代码如下:

<iframe style="z-index:1;position: absolute; ">
<!-- 用iframe 解决此bug -->     
            <select name="country">                    
                 <option value="1">china</option>     
                <option value="2">japanese</option>     
                <option value="1">U.S.A</option>     
             </select>     
</iframe>  

解决方法之二:以Iframe作为div的子元素,覆盖select元素

建立一个跟div同宽同高的iframe,并且z-index比div要低。这种方法推荐使用:

通过JSONP实现完美跨域

以前我经常在博客说JSONP,例如我的WordPress天气插件就是通过JSONP来调用的天气数据,今天就说说通过JSONP实现跨域的应用~

什么是JSONP

JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用 html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

对于上面的解释,我们可以简单这样理解:JSONP就是可以通过JavaScript文件进行跨域通讯的方式,例如:现在各大网站风靡的搜索提示,搜狗云输入法
注意:JSONP服务器端代码需要充分做好安全措施。

IE onchange事件触发bug?

今天遇到了IE一个onchange事件的bug,此bug存在于IE所有的版本(6,7,8)不知道是不是bug,还是IE故意这样设计的?姑且不做评价,我们来看看IE onchange事件的重现过程:

给input等控件添加onchange事件,例如input的checkbox(radio等),在IE下点击选中,并没有触发onchange事件,而需要再次失去焦点(点击页面的任何地方)的时候才可以触发onchange事件,而在Firefox下是点击选中checkbox既可以触发onchange事件的~

bug重现代码

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>IE onchange event bug</title></head>
<body>
<input type="checkbox" value="1" onchange="alert(this.value);" id="demo1"/>
<label for="demo1">demo1</label>
<input type="checkbox" value="2" onchange="alert(this.value);" id="demo2"/>
<label for="demo2">demo2</label>
</body></html>

解决方法

  1. 在jQuery1.4.2中绑定change事件是完全可以解决的,而在jQuery1.3.2中绑定change事件是不行的,我们可以通过click事件来绑定
  2. 如果不怕麻烦也不介意绑定两次事件,可以使用IE自带的onpropertychange事件绑定change事件,断桥残雪测试是可以的,不过这样子在IE下就绑定了两次change事件,不推荐这个方法,如果是checkbox,radio等还是使用click事件来处理吧

jQuery弹出框插件wBox 1.0正式发布

jQuery插件wBox 1.0正式发布——经过一系列的wBox需求分析,进行了wBox的代码重构,去除了一些鸡肋的功能~根据公司项目的需要进行了功能的调整,并且在界面上进行了美化处理~

wBox截图

查看wBox代码实例wBox1.0下载

wBox新功能及其变化

  1. 优化代码~
  2. 美化界面~
  3. 默认可拖动,drag为false关闭
  4. 新增wBox关闭方法:wBox.close()
  5. 新增wBox打开方法:wBox.showBox()
  6. 新增wBox定时关闭设置:通过参数timeout设置定时关闭时间
  7. 新增在不触发click事件的前提,显示wBox,$(s).wBox({show:true})
  8. 去除灯箱功能(准备做一个单独的jQuery灯箱插件)
  9. 去除设置窗口位置

javascript在光标位置插入内容

之前我写过一篇文章是通过javascript获取光标的位置——javascript获取光标位置以及设置光标位置。由于产品需要在留言板的光标处上插入表情,这样就用到了javascript在光标位置插入内容的功能了~其实原理很简单,IE下可以通过document.selection.createRange();来实现,而Firefox(火狐)浏览器则需要首先获取光标位置,然后对value进行字符串截取处理。不多说了~直接上我写的一个jQuery在光标位置插入内容插件吧~

jQuery在光标位置插入内容插件代码

jQuery插件wBox准备更新

随着断桥残雪写的jQuery插件wBox的用户越来越多,越来越多的人提出了wbox的需求,可是我最近比较忙,没有时间改写wBox,正好公司的一个新项目要采用wBox,提出了很多要求,我准备在接下来的一些时间中更新下wBox,并且解决IE6下的一些布局上的bug、添加一些新的功能,大家敬请期待吧~
嘻嘻~

wBox粗糙的主页