\n```\n\n```javascript\n$('.box').lazyload({\n onAppear: function () {\n $(this).html('Loaded').addClass('active');\n }\n});\n```\n\n### 直接加载图片\n\n当你不想要滚动懒加载时, 你可以直接指定一个延迟时间来加载图片, 比如 1000 毫秒后加载所有图片.\n\n```javascript\n$('.lazy').lazyload({\n delay: 1000\n});\n```\n\n## Options\n\n参数可以通过 data attributes 或者 JavaScript 两种方式来配置.\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\ncontainer | object | `window` | 滚动容器, 默认是 `window` , 仅支持原生 Dom 对象做为参数.\nthreshold | number | 0 | 偏移值, 用户判断 DOM 是否满足条件.\ndirection | string | vertical | 方向, 用于判断 DOM 是否满足条件. 可配置 `'both'`(位于viewport内), `'vertical'`(仅考虑垂直方向), `'horizontal'`(仅考虑水平方向), `'above'`(位于viewport及上方即可).\nskipInvisible | boolean | false | 是否忽略不可见 DOM . 不建议修改此项配置\nfailureLimit | number | 0 | 懒加载内部有一个依赖图片顺序的性能优化机制, 如果你的图片顺序是错乱的, 你可以适当调大该数值.\ndelay | number | -1 | 延迟加载时间, 单位毫秒, 当 delay >= 0 时, 会在 delay 时长后立即加载所有图片.\nattr | string or function | data-src | 配置图片的 `src` 来源\nsrcsetAttr | string or function | data-srcset | 配置图片的 `srcset` 来源\nremoveAttr | boolean | true | 当图片加载完毕后，去掉 `attr` 和 `srcsetAttr` 配置的属性\nonAppear | function | null | 当 DOM 满足条件时, 触发该回调函数, 仅触发一次.\nonLoad | function | null | 仅针对图片, 当图片加载成功时触发该回调函数.\nonError | function | null | 仅针对图片, 当图片加载失败时触发该回调函数.\nplaceholder | string | 一张 base64 透明图 | 仅针对图片, 占位图, 当没有默认 `src` 属性时, 会设置这个图片.\n\n## Methods\n\n### `.lazyload(options)`\n\n初始化, 可以接受参数进行配置.\n\n```javascript\n$('img.lazy').lazyload({\n threshold: 100\n});\n```\n\n### 手动销毁监听\n\n> 使用 $(el).lazyload(options) 方式创建的监听是 **无法** 手动（主动）去销毁监听的；（为了不影响 jQuery 的链式调用准则）\n\n1. 必须使用 `let lazyDestroyDemo = new AutoFE.Lazyload(el, options)` 来创建实例, `el` 可以是 jQuery 对象 / DOM 对象 / CSS 选择器（内部实现还是依赖 jQuery） \n2. 当需要主动去销毁该实例的监听时，通过调用 `lazyDestroyDemo.unbind()` 来销毁 \n3. 必要时销毁实例 `lazyDestroyDemo = null`\n\n如在 Tab 形式的异步列表，在切换 Tab 时可能需要销毁之前的监听，否则会造成严重的性能问题。\n\n# End\n\nThanks to [Bootstrap](http://getbootstrap.com/) and [tuupola/jquery_lazyload](https://github.com/tuupola/jquery_lazyload)\n","readmeFilename":"README.md"}
![](\"img/example1.jpg\")
\n![](\"img/example2.jpg\")
\n![](\"img/example3.jpg\")
\n```\n\n然后通过脚本初始化\n\n```javascript\n$('img.lazy').lazyload();\n```\n\n### 自定义图片来源\n\n```html\n![](\"demo.jpg\"\n)
\n```\n\n```javascript\n$('img.lazy').lazyload();\n```\n\n当然, 你可以可以自定义 `srcset` 来源:\n\n```javascript\n$('img.lazy').lazyload({\n srcsetAttr: 'data-srcset2'\n});\n```\n\n或者\n\n```javascript\n$('img.lazy').lazyload({\n srcsetAttr: function () {\n return $(this).attr('data-srcset2');\n }\n});\n```\n\n### 区块懒加载\n\n```html\n\n