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

2010-06-24 21 条评论 22,925 次阅读 被赞了 0 次

在浏览很多博客特别是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>

相关文章:

Default Thumbnaildedecms 织梦jmobile风格wap模板：基于jquery mobile 的手机移动设备dedecms模板发布 Default ThumbnailPJBlog：添加页面载入提示框 Default Thumbnail为PJBlog增加多附件上传功能—MultiAttUpload for PJBlog Default ThumbnailLightbox JS 2.03.3 for PJBlog 手动修改方法 Default ThumbnailPJblog 复制自动加版权信息 PJblog修改 Default Thumbnail鼠标触发型导航菜单 Default ThumbnailJavaScript简单实用技巧之网页表格特效 Default Thumbnail20个功能强大外观漂亮的Ajax+CSS表格特效 Default Thumbnailpjblog载入页面进度条显示特效的改进--setTimeout 和 setInterval 的区别 Default Thumbnail《精通Javascript+jQuery》视频教程
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
  1. maie说道：
    2012年09月17日 1:42 上午

    这种方法冒似是伪懒加载，图片下载完了之后再替换成占位像素图，然后滚动的时候再替换回来的，根本就i没有起到懒加载的作用。
    [reply=任侠,2012-09-17 10:56 AM]是的，事实确实如此，该功能不会提升图片加载速度，相反，还会对加载速度有一定影响，只是有一定的用户体验效果已[/reply]

    回复
  2. 落日故乡说道：
    2011年08月17日 9:08 下午

    应该是真正的按需加载吧

    回复
  3. 小星说道：
    2011年03月18日 6:23 上午

    很好很强大！

    回复
  4. 吃什么丰胸说道：
    2010年09月18日 2:41 上午

    mm挺漂亮呵呵
    http://www.fengxionge.com

    回复
  5. 左岸读书说道：
    2010年07月9日 9:14 下午

    这方法能让资源得到平衡利用。

    回复
  6. forever说道：
    2010年07月8日 6:40 下午

    这妹好看~

    支持下， 博客不错哈

    回复
  7. 网站SEO说道：
    2010年06月28日 11:30 下午

    终于知道这是个什么东东了，一直没有找到，今天终于被发现了，赶紧试试

    回复
  8. 木本无心说道：
    2010年06月27日 12:19 上午

    当然是功能了，我在海天无影那也看到这个功能……

    回复
  9. 宅男说道：
    2010年06月26日 11:10 下午

    MM很漂亮，以至于忘记了文章的内容，哈哈

    回复
  10. 凯说说道：
    2010年06月26日 10:28 下午

    我博客好像有 这个功能 谢谢分享

    回复
  11. 创享·生活说道：
    2010年06月26日 8:25 下午

    原来这样，我用新主题试试，呵呵

    回复
  12. 冰古说道：
    2010年06月26日 8:39 上午

    不知道是不是要加上这个，挺多blog都加上了这个效果。
    [reply=任侠,2010-06-26 12:01 AM]可以试试，就那么几句代码，挺简单的[/reply]

    回复
  13. 软件盒子说道：
    2010年06月26日 7:53 上午

    这几个图我喜欢
    [reply=任侠,2010-06-26 12:01 AM]这个。。。那你就收走吧，俺不会有意见的，哈[/reply]

    回复
  14. littlebear说道：
    2010年06月25日 8:56 下午

    看不懂!~

    回复
  15. zzzhu说道：
    2010年06月25日 6:55 上午

    图片真漂亮

    回复
  16. 礼物114说道：
    2010年06月25日 3:44 上午

    图挺漂亮的！ 东西也挺全的！
    [reply=任侠,2010-06-26 12:00 AM]我知道你看重的是示例图，哈哈[/reply]

    回复
  17. 大灰很说道：
    2010年06月25日 2:45 上午

    其实，我是来看mm的，第一个不错。
    要不是我的网站追求简单，我也加上这个试试看
    [reply=任侠,2010-06-26 12:00 AM]加这个其实是让网站更简单体验更好一些，呵呵[/reply]

    回复
  18. 创享·生活说道：
    2010年06月25日 2:39 上午

    这个不错啊..以前主题有这个，但是现在的主题没有啊

    那个宽高的限定是什么意思呢?
    [reply=任侠,2010-06-26 11:59 AM]宽度限定，就是当你直接插入图片，没有设置图片的宽度和高度时，默认的图片用fill.gif填充，但是这个图片只有1*1像素，所以当网页载入速度慢的时候，看不出来有图片，然后一会儿突然图片就出来了，效果不好[/reply]

    回复
  19. 木本无心说道：
    2010年06月25日 12:25 上午

    这个好，不错，我喜欢！
    [reply=任侠,2010-06-26 11:57 AM]你喜欢功能还是喜欢图片啊，哈哈[/reply]

    回复
  20. RayChow说道：
    2010年06月25日 12:02 上午

    哈哈在阅读器里还是全见的
    [reply=任侠,2010-06-26 11:57 AM]呵呵，那是，这只是添加在网页头部的效果嘛，阅读器里不全见就有问题了[/reply]

    回复
  21. 瑾瑜书生说道：
    2010年06月24日 11:43 下午

    这个效果不错 试试看

    回复
  22. lushao说道：
    2010年06月24日 10:49 下午

    效果太好了，不知在别的程序上能不能用。。
    [reply=任侠,2010-06-24 03:11 PM]不是已经说了，任何网站页面都可以用的[/reply]

    回复
  23. 四代战机说道：
    2010年06月24日 10:39 下午

    挺漂亮www.hizhensai.com

    回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code