Lazyload图片懒加载

收藏

当有大量图片的时候，通过Lazyload图片懒加载插件，会让图片陆续加载，从而提升了页面打开速度，二当家的的首页和列表页正式采用的这种方法。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先引入jquery库和lazyload插件：

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="lazyload.js"></script>

接着我们放置多个有图片的列表，注意图片上的属性original，即真正图片的地址，并且每个图片加上了.lazy。

<img src="images/grey.gif" original="http://www.erdangjiade.com/jquery/logo/45/middle.jpg" alt="超炫的弹出层效果Fancybox" class="lazy"  />

jQuery

最后我们对有.lazy的图片进行懒加载：

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

看下这个lazyload懒加载网页特效吧，突然有点流畅，有点炫哦！~