前些日子自己想搞个延时加载的玩玩，但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　　　默认解压密码：www.yilingsj.com
在线演示→→Lazy Load延迟加载图片效果
插件源出处→→http://www.appelsiini.net/projects/lazyload

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2014-06-20/165.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。