基于jQuery.Lazyload 为网站(PJblog)添加当鼠标滑到当前屏时图片渐隐载入显示效果

在浏览很多博客特别是WordPress类的博客的时候,经常能看到那种当鼠标滚动到图片位置时,图片才渐隐显示出来的效果,一直感觉都很不错。因为这个效果体验很好,而且在加载速度等方面也很不错。
刚在一个博客(自力博客)里看到该效果的wp添加方法,发现该效果其实可以添加到任何网站上的,于是就将其用在本博客上了。具体效果可以参看下面的实例图片。下面说一下在网站上添加该效果的方法。

一、特效优点

1、加速站点的页面载入速度;
2、不唐突的图片渐显方式;
3、代码精简,便于操作维护,JS代码仅仅 1.6KB  先决条件是:你的站加载了 Jquery.js

二、原理:

能判断访客是不是在查看当前图片,若非,则加载 预留的填充图片 fill.gif ,等访客滑动鼠标滑轮或浏览到图片位置时,真正的图片地址才回加载。
不用用担心对访客的有好程度,这个效果会在图片即将被浏览到的时候就开始加载图片。

三、特效缺点

有一个,是关于img,height限定的问题,即当没有设置img的宽度和高度时,默认显示的fill.gif图片因为太小而看不到图片位置。不过你可以自己设计一个小但是图片稍大的图片来代替fill.gif。

四、实现方法

1、下载 jquery.lazyload.js

2、将上面下载到的文件放到网站根目录,或者自定义一个位置(注意如果修改的话,后面引用这些文件时的路径也要同时修改)
pjblog的话放到根目录即可,会覆盖进插件的目录里

3、网页的头部(即<head></head>部分)中适当位置添加下面的代码。
pjblog添加在header.asp文件里即可,全静态则应添加在Template/static.htm文件里。
注意:红色部分可以限定只对文章中特定标签内的img生效,比如修改成 $(".content img")等。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="/Plugins/jQueryLazyload/jquery.lazyload.js"></script>
<script type=text/javascript>// <![CDATA[
    jQuery(document).ready(
    function($){
    $("img").lazyload({
         placeholder : "/Plugins/jQueryLazyload/fill.gif",
         effect      : "fadeIn"
    });
    });
    // ]]></script>