WordPress 实现图片渐显效果

Posted in 2010/07/27Kuki19条评论 »

WordPress实现图片渐显效果

在 Forece’s Blog 看到的好东东，貌似他最近很热衷于钻研 WordPress，新发布的文章几乎全是这方面的内容，当然他也是转载自 海天无影Blog。不得不说，这是一个非常适合我的东西，博客图片较多的也强烈建议看下。

特效优点：

1、加速wordpress站点的页面载入速度；

2、不唐突的图片渐显方式；

3、代码精简，便于操作维护，JS代码仅仅 1.6KB  先决条件是：你的站加载了 Jquery.js。（注意：这里不能用GOOGLE的mini 1.3.2版的 jQ 库）

原理：

这个特效是少有的既华丽又加速的效果，因为它能判断访客是不是在查看当前图片，若非，则加载预留的填充图片 fill.gif ，等到访客滑动鼠标滑轮或浏览到图片位置时，真正的图片地址才会加载。也就是说，如果访客瞬间打开你的页面，然后瞬间关闭，处于页脚的图片是不被加载的，何乐而不为呢？

不用用担心对访客的有好程度，这个效果会在图片即将被浏览到的时候就开始加载图片。

实现方法：

1、下载 jquery.lazyload.zip （包含 jquery.lazyload.js 和 fill.gif ）

2、将上面2文件，放到 wordpress 的某个目录，比如放在 www.veryls.com/up/ 目录下

3、在当前主题的  header.php 中适当位置添加下面 JS调用代码：

<script type="text/javascript" src="http://www.veryls.com/up/jquery.lazyload.js">
</script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
     placeholder : "http://www.veryls.com/up/fill.gif",
     effect      : "fadeIn"
    });
});
</script>

其中“http://www.veryls.com/up”部分需替换为你自己的路径，ready( function($){ $(“img”) 若是修改成 $(“.content img”) 可以限定只对文章中的 img 生效（前提是文章的 div 的 class 是 content ，若是像我的模板一样文章 id 是 content，则可以改为$(“#content img”)，这个问题我苦恼了好久没解决，于是在海天那里留言询问最终解决了，非常感谢海天同学的帮助）。

注意！！本文中使用的jQ库不能使用google的1.3.2版的mini的jQ库，1.4.2到是可以使用，不过太新太大，不推荐使用。推荐使用 WordPress 自带的jQ库，文件位于：/wp-includes/js/jquery/jquery.js。

调用方法（可将此段代码加到上面第3步代码之前）：

<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.3.2'>
</script>

这样就OK了，打开我的主页，用滑轮滑动浏览，便可以看到图片加载的整个动态效果了。是不是既美观又实用呢？



---- 相关文章 ----------------------------------------------------

WordPress, 技术文摘

您可以RSS 2.0订阅。 留言，或者引用 Trackback。

19条评论 »

 
 

发表评论