IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

Lazy Load延迟加载图片效果

作者:繁华已逝  发布日期:2014-08-19 20:36:46
  • 收藏本文    我要投稿
  •       前些日子自己想搞个延时加载的玩玩,但js自己是不会写的,只有上网找插件了。在网上找了好多,都比较坑爹!为什么呢?大部分文章都是他妹的一篇不停的转载,这地方省一点那地方省一点。你说你转载就算了,保留原出处链接也行啊,这样也方便大家可以有更大的收获。但事实上是什么样子,我也就不多说了,我相信上网查过资料的亲都有过感受。在网上找了好久,最终还是有收获的。自己弄了几个小时后,终于折腾出来了。下面献上自己整理的源码,大神喷时还请手留情。先附一张效果图:Lazy-Load延迟加载图片效果

    css样式:

    .lazy{width:400px;height:400px;margin:10px 5px 0 5px;background:url(http://www.yilingsj.com/skin/yilingsj/image/loading.gif) no-repeat center center;}
    <!--由于这里是以一张图片复制演示,所以尺寸大小直接标出。背景图片是一个Loading的加载图片,可自由替换-->

    jquery:

    <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js" charset="utf-8"></script><!--jq库,此处用的版本是1.8.3,可替换成自己的最新版本库。此库禁止省略,因为jq运行是需要库的!-->
    <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery.lazyload.js" charset="utf-8"></script><!--这个才是Lazy Load延迟加载的js插件-->
    <script type="text/javascript">
    $(function($){
     $('img')
     .delay(2000)//由于本地加载速度很快,这里添加一个【delay】起一个缓冲作用,也就是2s后再进行加载内容,便于看效果
     .laxyload({effect:"fadeIn"});//淡入效果,可切换。曾在网上找到一篇文章里面介绍了10几种,但忘记保存了,现在一直找不到,下次再找到了附上链接
    });
    </script>

    html示例:

    <img class="lazy"data-original="http://y0.ifengimg.com/news_spider/dci_2013/07/0b6200c5e84f399a9a32a7360790a1da.jpg" />
    <!--这里的【lazy】无须写【display:none】样式,【data-original】后面跟的是真正的图片地址,src可省略。网上好多文章都添加上,那个没必要。-->

    最后附一个demo的演示地址:http://www.yilingsj.com/d/file/jquery/2014-06-20/Lazy%20Load%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87%E6%95%88%E6%9E%9C.html

    jquery.lazyload.zip插件下载地址:http://www.yilingsj.com/e/DownSys/DownSoft/?classid=86&id=57&pathid=0

    转载原文地址:http://www.yilingsj.com/jquery/2014-06-20/165.html

Tag标签:效果  图片  
  • 专题推荐