您的位置 首页 织梦动态

js图片延迟加载特效 图片懒加载lazyload代码实例

为什么要使用图片延迟加载?首要因素就是为了加快网页的打开速度,以最短的时间打开网页展现给浏览者面前,毕竟现在人可没那么多耐心等待一个网站花费大量时间加载,如果网页

为什么要使用图片延迟加载?首要因素就是为了加快网页的打开速度,以最短的时间打开网页展现给浏览者面前,毕竟现在人可没那么多耐心等待一个网站花费大量时间加载,如果网页 […]

为什么要使用图片延迟加载?首要因素就是为了加快网页的打开速度,以最短的时间打开网页展现给浏览者面前,毕竟现在人可没那么多耐心等待一个网站花费大量时间加载,如果网页还没打开就被浏览者关闭了,可以说是最失败的事情了。

尤其是针对图片较多的网站,一个页面充斥着大量图片,如果图片还是未经压缩过的、尺寸比较大,那打开这个页面时间很是令人崩溃的。所以图片延迟加载就很必要了,随着用户向下滚动页面,只有当图片滚动到可视视窗内,或接近可视视窗时,这个图片才会从服务器加载,只加载网页可视区域的内容,看不到的区域的图片内容不加载,这样就能节省出大量的时间。

这里我们使用到的是一个js插件:jquery.lazyload.js,需要结合jQuery使用(注意:如果提示出错,看看你的jQuery版本是不是太低了,换个高版本的jQuery再次尝试)。

引入js文件:

12<scriptsrc="jquery-1.11.0.min.js"></script><scriptsrc="jquery.lazyload.js"></script>

在HTML中正常图片代码如下:

<img src="images/picture.jpg" alt="图片延迟加载" />

想给图片加上延迟加载特效,只需要做如下修改:

1<imgclass="lazy"data-original="images/picture.jpg"alt="图片延迟加载"/>

最后再引入初始化js代码:

12345<scripttype="text/javascript"charset="utf-8">$(function(){$("img.lazy").lazyload({effect:"fadeIn"});});</script>

代码说明:我们为每个img标签中加上类class="lazy"标志,然后将src改成data-original;当初始化js代码加载后,图片进入网页可视区域后,js代码会找到所有带有类lazy标志的img标签,然后再将data-original中的数据即图片路径写入img标签,这样一张图片就会显示出来。出于优化考虑,为img标签加上alt属性,告知搜索引擎这是一张什么图片。

当然,为了省事也可以去掉img标签中的class="lazy",此时需要你修改对应的初始化代码:

1$("img").lazyload({effect:"fadeIn"});

上面代码会将该页面中所有img标签获取到,然后进行延迟加载操作。

note:如果想提前载入图片,比如在距可视区域100px前就开始加载数据,初始化代码需要写成下面这样:

1$("img.lazy").lazyload({threshold:180});

layzload相关参数如下:

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

为背景图片添加延迟加载特效:

不要以为lazyload只能给img图片标签添加延迟加载特效,同样可以在背景图片上使用,二者使用方法很类似:

HTML代码:

1<divclass="lazy"data-original="img/pic.jpg"width="660"height="550"></div>

js代码:

123$(function(){$("div.lazy").lazyload();});

上面代码就实现了给div标签背景图片添加延迟加载特效的功能。

可能你会问如果我要给span、li等其他标签添加呢?其实很简单,看下代码就能明白:

1234<divclass="lazy"data-original="img/pic.jpg"width="660"height="550"></div><spanclass="lazy"data-original="img/pic.jpg"width="660"height="550"></span><pclass="lazy"data-original="img/pic.jpg"width="660"height="550"></p><liclass="lazy"data-original="img/pic.jpg"width="660"height="550"></li>

对应js也要添加些代码:

123456$(function(){$("div.lazy").lazyload();$("span.lazy").lazyload();$("p.lazy").lazyload();$("li.lazy").lazyload();});

也就是说,只要添加了对应标记,而且告诉lazyload()加载这个标签标记才会起作用。

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

作者: 致命的织梦

为您推荐

php小数点后取两位的三种实现方法

php小数点后取两位的三种实现方法

php小数点后取两位的方法。 方法一、经常用到小数点后取几位,但不能进位的情况。 比如3.149569取小数点后两位,最后两位不能四舍五入。结果:3.14。 可以使用函数floor。 该函数是舍

织梦DEDECMS本地后台操作卡顿的解决方法

今天在本地安装了织梦DEDECMS后,在后台操作非常卡,点击菜单,一般得四五秒才能打开。解决方法: 打开/data/common.inc.php,把默认的$cfg_dbhost = localhost 修改为$cfg_dbhost = 127.0.0.1;保存。然

如何为网站安装SSL证书?

SSL证书在网络传输过程的优势越来越突显:加密网络传输数据、提升网站的安全等级,获取客户端对网站的信任度,更重要的是保护客户端与服务端之间的在线交易。SSL证书对于刚刚接

织梦dedecms熊掌号时间因子改造教程

前段时间百度 极光算法上线 ,很多站长朋友都没有改造适配网站的时间因子,易优cms在网上巡逻了一圈,也没有发现相关的教程。 今天易优cms就已织梦cms为例,给大家讲讲织梦熊掌号

dedecms PC和移动端共用一个后台 图片路径处理问题

dedecms PC和移动端共用一个后台 图片路径处理问题

dedecms中PC和移动端共用一个后台时,因为上传图片默认是PC端根目录下的相对路径,这样对于移动端来说图片路径就不对了,所以需要把上传的缩略图和文章中的图片路径进行处理: 一

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注