Jquery 实现图片懒加载

来源：互联网发布：中国方言软件编辑：程序博客网时间：2024/06/15 12:34

直奔主题，根据jquery 提供的 lazyload.js 插件实现图片懒加载，demo 在最下面
lazyload.js 可以实现图片的分批加载，可以缓解庞大项目的网络压力，使用起来非常方便
代码供上：

<!DOCTYPE html><html>    <head>        <title>图片懒加载</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1.0">    </head>    <body>        <div id="testImage">            <img data-original="../images/test.png"/>            <img data-original="../images/test.png"/>            <img data-original="../images/test.png"/>        <div>        <script src="../js/jquery-1.7.2.min.js"></script>        <script src="../js/jquery.lazyload.min.js"></script>        <script>            $(function(){                $("img").lazyload({                    placeholder : "../images/placeholder.png",                    effect : "fadeIn",                    threshold : 500,                    container: $("#testImage")                });            });        </script>    </body></html>

可下载演示代码（含lazyload.js 插件）

从代码中可以看出，图片懒加载需要使用的属性：data-original,这个属性是真实的图片地址
而在页面初始化中配置的参数 placeholder :这个属性的作用是在真实图片没有加载出来时的临时的占位图片，当真实图片加载出来之后，这个占位的图片就会被隐藏。以上即可轻松实现图片的懒加载。
但是可能会存在一些问题，因为没有给图片限制高度，所以只有当界面滚动条滚动或者界面大小发生变化时，可视范围内的图片才会加载（具体愿意我也不太清除。。。。），所以<img height="20" data-original="../images/test.png"/>这样给image 添加了高度属性之后，在可视范围内的图片就会被立即加载出来

对lazyload的属性解释：

//用图片提前占位placeholder : "img/grey.gif",参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏//载入使用何种效果effect : "fadeIn",参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn　　//提前开始加载threshold : 200,参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.//事件触发时才加载event : "click",参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…//对某容器中的图片实现效果container: $("#container"),参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片　　//图片排序混乱时failurelimit : 10,参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题

另附：（这个我也是在别人的博客上看到的，具体没有用过，先记录下）
其实背景图片也可以延迟加载。背景图片图片延迟加载有一个更大的好处是，爬虫爬取时无法爬取到图片，节省了服务器资源。

<div class="lazy" data-original="img/example.jpg" width="640" height="480"></div>

这样，只有当这个div出现在可视视窗内时，背景图才会加载显示。

1 0