图片适当载入渐显特效, 基于jQuery.Lazyload

最近很无耻的抄袭了很多文章,哈哈,每次换模板我都要去自己的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>

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