首页 > 代码库 > Lazy Load延迟加载图片效果

Lazy Load延迟加载图片效果

2024-07-18 08:21:08   219人阅读

      前些日子自己想搞个延时加载的玩玩，但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


联系
我们