缓冲加载图片的jQuery插件lazyload.js 真正省资源用法_XHTML/WEB_黑客防线网安服务器维护基地--Powered by WWW.RONGSEN.COM.CN

缓冲加载图片的jQuery插件lazyload.js 真正省资源用法

作者:黑客防线网安网站设计小组 来源:黑客防线网安网站建设网 浏览次数:0

本篇关键词:jQueryjQuery插件lazyload
黑客防线网安网讯:  jQuery插件Lazy Load.js,是用来缓冲加载图片的。如果一个网页内容很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那 个图片的时候,它才会从请求下载图片,然后显示


        默认的触发事件,是滚动,当你滚动的时候,就会检查然后加载。你可以使用event属性,设置你自己的加载事件,之后你可以自定义触发这个事件的条件,然后去加载图像。

    $("img.lazy").lazyload({ event : "click" });

        自定义显示效果

        默认的图片实现效果,就是没有效果,下载完成之后,直接显示出来。这样的用户体验并不好,你可以设置 effect 属性,来控制显示图片的效果。例如

    $("img.lazy").lazyload({ effect : "fadeIn" });

        fadeIn的效果就是,改变图片的透明度,渐现的方式出现。效果: effect demo page

        把图像插入某个容器

        大家如果使用智能手机的话,经常去应用网站下载应用,他们通常使用一个横着的容器,放一些手机截图。使用 container 属性,能很轻松在容器中实现缓冲加载。首先,我们需要用css定义这个容器,然后用这个插件进行加载。效果:vertical

    #container { height: 600px; overflow: scroll; }

    $("img.lazy").lazyload({       
         container: $("#container")
    });

        加载不可见图像

        有部分图像是不可见的,我们对其加上类似 display:none 等属性的图像。默认的情况下,这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像,我们需要将 skip_invisible 设置为 false

    $("img.lazy").lazyload({ skip_invisible : false });
    黑客防线网安服务器维护方案本篇连接:http://www.rongsen.com.cn/show-19048-1.html
网站维护教程更新时间:2012-09-24 22:16:00  【打印此页】  【关闭
我要申请本站N点 | 黑客防线官网 |  
专业服务器维护及网站维护手工安全搭建环境,网站安全加固服务。黑客防线网安服务器维护基地招商进行中!QQ:29769479

footer  footer  footer  footer