标签：style blog http color java io ar 2014
前些日子自己想搞个延时加载的玩玩，但js自己是不会写的，只有上网找插件了。在网上找了好多，都比较坑爹！为什么呢？大部分文章都是他妹的一篇不停的转载，这地方省一点那地方省一点。你说你转载就算了，保留原出处链接也行啊，这样也方便大家可以有更大的收获。但事实上是什么样子，我也就不多说了，我相信上网查过资料的亲都有过感受。在网上找了好久，最终还是有收获的。自己弄了几个小时后，终于折腾出来了。下面献上自己整理的源码，大神喷时还请手留情。先附一张效果图：
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可省略。网上好多文章都添加上，那个没必要。-->
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
Lazy Load延迟加载图片效果,布布扣,bubuko.com
标签：style blog http color java io ar 2014
原文地址：http://www.cnblogs.com/adubky/p/3921594.html
