上一篇: 
下一篇: 
基于jQuery.Lazyload 为网站（PJblog）添加当鼠标滑到当前屏时图片渐隐载入显示效果
作者:任侠 日期:2010-06-24
在浏览很多博客特别是WordPress类的博客的时候，经常能看到那种当鼠标滚动到图片位置时，图片才渐隐显示出来的效果，一直感觉都很不错。因为这个效果体验很好，而且在加载速度等方面也很不错。
刚在一个博客（自力博客）里看到该效果的wp添加方法，发现该效果其实可以添加到任何网站上的，于是就将其用在本博客上了。具体效果可以参看下面的实例图片。下面说一下在网站上添加该效果的方法。
一、特效优点
1、加速站点的页面载入速度；
2、不唐突的图片渐显方式；
3、代码精简，便于操作维护，JS代码仅仅 1.6KB 先决条件是：你的站加载了 Jquery.js
二、原理：
能判断访客是不是在查看当前图片，若非，则加载 预留的填充图片 fill.gif ，等访客滑动鼠标滑轮或浏览到图片位置时，真正的图片地址才回加载。
不用用担心对访客的有好程度，这个效果会在图片即将被浏览到的时候就开始加载图片。
三、特效缺点
有一个，是关于img，height限定的问题，即当没有设置img的宽度和高度时，默认显示的fill.gif图片因为太小而看不到图片位置。不过你可以自己设计一个小但是图片稍大的图片来代替fill.gif。
四、实现方法
1、下载 jquery.lazyload.js和fill.gif文件，这里提供下载：
点击下载此文件
2、将上面下载到的文件放到网站根目录，或者自定义一个位置（注意如果修改的话，后面引用这些文件时的路径也要同时修改）
pjblog的话放到根目录即可，会覆盖进插件的目录里
3、网页的头部（即<head></head>部分）中适当位置添加下面的代码。
pjblog添加在header.asp文件里即可，全静态则应添加在Template/static.htm文件里。
注意：红色部分可以限定只对文章中特定标签内的img生效，比如修改成 $(".content img")等。
<script type=text/javascript>// <![CDATA[
jQuery(document).ready(
function($){
$("img").lazyload({
placeholder : "/Plugins/jQueryLazyload/fill.gif",
effect : "fadeIn"
});
});
// ]]></script>
效果预览（往下滚动鼠标，N多图片示例）：
文章来自: 自力博客
引用通告: 查看所有引用 | 我要引用此文章
Tags: 【jQuery】【LazyloadPJblog】【鼠标】【图片】【渐隐】【特效】
相关日志:
发表意见
回复
引用该留言 19楼左岸读书[2010-07-09 01:14 PM | 
| 
| 取消审核]
任侠 于 
