雨夜带刀's Blog 关注前端与用户体验

图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。如果TAB中的图片较多，也同样可以应用于TAB中，当触发TAB时再进行图片的加载。

图片延迟加载的原理比较简单，先将图片的真实地址缓存在一个自定义的属性(lazy-src)中，而src地址使用一个1×1的全透明的占位图片来代替，当然占位图片也可以是其他的图片…

一直想知道jQuery的选择器到底哪个性能更好,却一直苦于没有顺手的测试工具。直到前不久同事老马开发了一款测试JavaScript性能的给力小插件FireJSPT，这个插件是基于Firebug的，可以灵活的对页面中的JS代码片断进行测试，使用的时候只要将FireJSPT的类库文件导入即可：

<script type="text/javascript" src="firejspt.js"></script>

使用FireJSPT，本博对jQuery的常用的选择器在Firefox下做了一个测试，测试环境如下：

• 操作系统：Windows 7旗舰版本
• 浏览器：Firefox 3.6.13
• 插件：Firebug 1.60(未安装其他插件)
• jQuery版本：1.44

层级选择器(ul li)和find的对比

HTML结构如下：

<ul class="list">
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    
    <li><a href="#">jQuery常用选择器性能测试</a></li>
</ul>

最近的项目用到TAB效果的地方较多，于是自己稍微封装了下，写成了jQuery插件，方便以后使用，顺便重温下jQuery插件的实现机制。

在写插件之前对常见的TAB效果做了下总结，大体上也就那几种效果。插件力求简单易用，只要能实现常见的功能即可。

参数说明：

• event
• 触发TAB的事件类型，鼠标悬停：mouseover，鼠标点击：click，默认为mouseover。
• timeout
• 事件延迟，单位为毫秒，默认为0。
• auto
• 自动切换，单位为毫秒，默认为0。
• callback
• 回调函数，触发TAB时执行，函数的参数返回的是this。

这是一个基于jQuery的效果，当鼠标在小图片上悬停时，会弹出一个大图，该大图会跟随鼠标的移动而移动。这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：

经常会有些同志问我有没有好用的基于jQuery的弹出层插件，我通常都会毫不犹豫的推荐他这款插件–BlockUI。我也极少接触到其他的jQuery弹出层插件，因为我觉得有了BlockUI这款功能强大的插件已经能满足我的需求了。

先看看BlockUI的演示效果：

BlockUI支持很多常见的弹出层，表单、图片、div窗口等。那么这个插件该如何使用呢？接着往下看。

先导入jQuery的库文件(小提示：使用Google服务器的压缩版jQuery库文件加载速度会更快)，然后再导入BlockUI的库文件，如果你觉得库文件比较大你可以使用压缩技术对其进行压缩，本博在另一篇文章中详细的说明了javascript文件和CSS文件的压缩。