图片延迟加载

  • 介绍

我们的页面可能很大,不可能一下就全部展现出来,也就是说有些元素(例如:图片)只有在滚动到指定位置才能看到。如此看来,就没有必要再加载页面时一次性把所有的图片全部都加载进来——图片延迟加载。

官网:http://www.appelsiini.net/projects/lazyload

  • 好处

图片延迟加载到底有什么好处呢?我这里列举几个:减少图片流量的并发、减轻移动端不必要的流量损失、减轻服务端的压力。

  • jQuery Lazy Load

这是基于jQuery开发的一款插件。

<script src="jquery.js"></script>

<script src="jquery.lazyload.js"></script>

<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480">

上面的代码声明了图片的延迟加载,通过下面的js代码来启用加载:

$('img.lazy').lazyload();

  • 参数说明

effect 加载使用的动画效果,例如:show、fadeIn、slideDown等jQuery自带的效果,也就自定义,默认值为show

effectspeed 动画效果的时间参数

skie_invisible 跳过隐藏的图片,默认值为true

appear 图片加载时事件,有两个参数:elements_left(未加载的数量),settings(lazyload的参数)

load 图片加载后的时间,参数和appear相同

 

发表评论

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