jQuery LazyLoad 图片延迟加载

88570299 2016-07-27

基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载。

对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。

  • 版本:
  • jQuery v1.4.4+
  • jQuery Lazy Load v1.7.2
  • 注意事项:
  • 需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能。

  • github

在线实例

  1. $('img').lazyload();
复制

实例预览 Basic Options 基础示例

  1. $('img').lazyload({ 
  2.   effect:'fadeIn' 
  3. });
复制

实例预览 With Fadein Effect 使用淡入动画效果示例

  1. .lazy { 
  2.   display: none; 
  3. }
复制
  1. <img class="lazy" src="grey.gif" data-original="example.jpg" width="765" height="574"> 
  2. <noscript><img src="example.jpg" width="765" height="574"></noscript>
复制
  1. $('img.lazy').show().lazyload({ 
  2.   effect: 'fadeIn' 
  3. });
复制

实例预览 Noscript Fallback 不支持 JavaScript 时的降级示例


实例预览 Horizontal Scrolling 水平滚动示例
实例预览 Horizontal Scrolling Inside Container 容器内的水平滚动示例
实例预览 Vertical Scrolling Inside Container 容器内的垂直滚动示例
实例预览 Load Images Using Timeout 定时加载图像

使用方法

载入 JavaScript 文件

  1. <script src="jquery.js"></script> 
  2. <script src="jquery.lazyload.js"></script> 
复制

修改 HTML 代码中需要延迟加载的 IMG 标签

  1. <!-- 
  2. 将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片) 
  3. 添加 class="lazy" 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 jQuery 选择器 
  4. 添加 width 和 height 属性有助于在图片未加载时占满所需要的空间 
  5. --> 
  6. <img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480"> 
复制

调用 Lazy Load

  1. $('img.lazy').lazyload();
复制

参数说明

containerwindow父容器。延迟加载父容器中的图片。
event'scroll'触发加载的事件
effect'show'加载使用的动画效果,如 show, fadeIn, slideDown 等 jQuery 自带的效果,或者自定义动画
effectspeedundefined动画时间。作为 effect 的参数使用:effect(effectspeed)
data_attribute'original'真实图片地址的 data 属性后缀
threshold0灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示;设为整数表示图片距离 x 像素进入显示区域时进行加载;设为负数表示图片进入显示区域 x 像素时进行加载。
failure_limit0容差范围。页面滚动时,Lazy Load 会遍历延迟加载的图片,检查是否在显示区域内,默认找到第 1 张不可见的图片时,就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同,但是也可能会出现例外,通过该值来扩大容差范围。
skip_invisibletrue跳过隐藏的图片。图片不可见时(如 display:none),不强制加载。
appearnull图片加载时的事件 (Function),有 2 个参数:elements_left(未加载的图片数量)、settings(lazyload 的参数)。
loadnull图片加载后的事件 (Function),有 2 个参数,同 appear 。

相关推荐

飞蛾分吧 / 0评论 2017-12-08
82244951 / 0评论 2013-01-22