最近很无耻的抄袭了很多文章，哈哈，每次换模板我都要去自己的WordPress分类中找自己以前改过了什么，所以最好还是把修改过的文章扔到自己的博客里安全。这篇是转载自海天博客的文章。

先来说明一下“图片适当载入渐显特效”，就是当即将浏览到有图片的地方，那张图片才开始自动加载，当然不是突然加载上去，而是渐显效果的加载起来， 让浏览者感觉不是那么生硬。这样的好处就是可以加快访问速度和节省流量，因为很多浏览者说不定只是想看一下内容，或者根本看不完内容，这样他没看到的图片 就不会显示。而且这样也不用担心浏览者会看不到图片，因为在即将浏览到图片的时候，图片会自动渐显的加载。

呵呵很帅吧，来看看怎么实现的吧，加速度和省流量，何乐而不为呢。

这个图片适当载入渐显特效是海天在HZLZH博友那看到的，海天感觉很不错，就载了过来，可以让更多朋友看到，顺便备份下，呵呵。

特效优点：
1、不会全部加载页面所有图片，加快页面载入速度；
2、图片加载渐显效果，图片显示方式不生硬；
3、代码精简，便于操作维护，JS代码仅仅 1.6KB ，当然前提是你的先加载jQuery库。注意：这里不能用GOOGLE的mini 1.3.2版的jQ库；

原理嘛，上面海天已经简单说过了，特效是判断了是否浏览到图片，如果没有则加载fill.gif（43字节），当浏览者鼠标滚动快要到图片地方，则自动加载图片，并以渐显效果显示,这样的显示效果对用户体验也有一定的提高。也就是说如果浏览者打开后瞬间关闭，屏幕上没有显示的图片是不会加载的，这样速度和流量肯定是节省不少的了，特别是那些图片博客 。海天已经测试过，在浏览到图片之前，图片是不会被加载的。

方法：
1、下载jquery.lazyload.js （1.6K）
2、当然是上传到网站目录
3、在header.php顶部适当位置添加以下代码：

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="http://blog.haitianhome.com/up/jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
     placeholder : "http://blog.haitianhome.com/up/fill.gif",
     effect      : "fadeIn"
});
});
</script>

代码中，图片地址可以换成你想要使用特效的图片，默认是全站图片使用。
Jquery的地址需要替换成你自己的地址

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

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

到底显示的效果是什么样子的，大家可以用鼠标向下滚动，接着向下，到评论位置，那评论者的头像显示效果就是啦，效果不错吧。再给大家多图的文章，让大家慢慢观赏。

打赏分享