图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。如果TAB中的图片较多，也同样可以应用于TAB中，当触发TAB时再进行图片的加载。
图片延迟加载的原理比较简单，先将图片的真实地址缓存在一个自定义的属性(lazy-src)中，而src地址使用一个1×1的全透明的占位图片来代替，当然占位图片也可以是其他的图片…
<p>一直想知道jQuery的选择器到底哪个性能更好,却一直苦于没有顺手的测试工具。直到前不久同事老马开发了一款测试JavaScript性能的给力小插件<a href="http://www.kacakong.com/archives/300" target="_blank">FireJSPT</a>，这个插件是基于Firebug的，可以灵活的对页面中的JS代码片断进行测试，使用的时候只要将FireJSPT的类库文件导入即可：</p>
<pre class="brush: c-sharp">
<script type="text/javascript" src="firejspt.js"></script>
</pre>
<p>使用FireJSPT，本博对jQuery的常用的选择器在Firefox下做了一个测试，测试环境如下：</p>
<ul>
<li>操作系统：Windows 7旗舰版本</li>
<li>浏览器：Firefox 3.6.13</li>
<li>插件：Firebug 1.60(未安装其他插件)</li>
<li>jQuery版本：1.44</li>
</ul>
<h3>层级选择器(ul li)和find的对比</h3>
<p>HTML结构如下：</p>
<pre class="brush: c-sharp">
<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>
<!–省略455个li标签–>
<li><a href="#">jQuery常用选择器性能测试</a></li>
</ul>
</pre>
最近的项目用到TAB效果的地方较多，于是自己稍微封装了下，写成了jQuery插件，方便以后使用，顺便重温下jQuery插件的实现机制。
在写插件之前对常见的TAB效果做了下总结，大体上也就那几种效果。插件力求简单易用，只要能实现常见的功能即可。
<p>这是一个基于jQuery的效果，当鼠标在小图片上悬停时，会弹出一个大图，该大图会跟随鼠标的移动而移动。这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：</p>
<div class="art_inner_img"><img src="https://blog.yiguochen.com/wp-content/uploads/2010/09/jquery-image-hover-zoom-demo.jpg" alt="基于jQuery的鼠标悬停时放大图片的效果演示" /></div>
<p>经常会有些同志问我有没有好用的基于jQuery的弹出层插件，我通常都会毫不犹豫的推荐他这款插件–BlockUI。我也极少接触到其他的jQuery弹出层插件，因为我觉得有了BlockUI这款功能强大的插件已经能满足我的需求了。</p>
<p>先看看BlockUI的演示效果：</p>
<div class="demo"><a href="https://blog.yiguochen.com/wp-content/uploads/demo/jquery-blockui/index.html" target="_blank">查看演示</a></div>
<p>BlockUI支持很多常见的弹出层，表单、图片、div窗口等。那么这个插件该如何使用呢？接着往下看。</p>
<p>先导入jQuery的库文件(小提示：使用Google服务器的压缩版jQuery库文件加载速度会更快)，然后再导入BlockUI的库文件，如果你觉得库文件比较大你可以使用压缩技术对其进行压缩，本博在另一篇文章中详细的说明了<a href="https://blog.yiguochen.com/minify.html" target="_blank" title="压缩JS/CSS的利器–minify">javascript文件和CSS文件的压缩</a>。</p>
