基于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>

点赞 (0)
  1. maie说道:

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

  2. 落日故乡说道:

    应该是真正的按需加载吧

  3. 小星说道:

    很好很强大!

  4. 左岸读书说道:

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

  5. forever说道:

    这妹好看~

    支持下, 博客不错哈

  6. 网站SEO说道:

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

  7. 木本无心说道:

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

  8. 宅男说道:

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

  9. 凯说说道:

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

  10. 创享·生活说道:

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

  11. 冰古说道:

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

  12. 软件盒子说道:

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

  13. zzzhu说道:

    图片真漂亮

  14. 礼物114说道:

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

  15. 大灰很说道:

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

  16. 创享·生活说道:

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

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

  17. 木本无心说道:

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

  18. RayChow说道:

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

  19. 瑾瑜书生说道:

    这个效果不错 试试看

  20. lushao说道:

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

  21. 四代战机说道:

    挺漂亮www.hizhensai.com

回复 软件盒子 取消回复

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

Captcha Code