Amaze UI Plugin

结合 Amaze UI 使用 Echo.js

图片懒加载 Echo 与 Amaze UI 结合使用示例

Star Fork Download

Echo.js

Forked from Echo.

Echo 是一个轻量的 JS 图片懒加载插件,不依赖其它库。支持 IE8+。

使用示例:

获取 Echo.js

使用 NPM:

Amaze UI 只是添加了使用示例并发布到 NPM,代码与官方发布的版本保持一致。

npm install amazeui-echo

使用 Bower:

bower install echojs

使用方法

在图片上添加 data-echo 属性填写图片的真实地址;如果想懒加载背景图片,可以使用 `data-echo-background' 属性填写真实地址。

<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">

<script src="path/to/echo.js"></script>
<script>
echo.init({
  offset: 100,
  throttle: 250,
  unload: false,
  callback: function (element, op) {
    console.log(element, 'has been', op + 'ed')
  }
});

// echo.render(); is also available for non-scroll callbacks
</script>

API 说明

.init() (options)

init() API 有以下几个选项:

下面的代码会在图片加载完成后添加 loaded class。

echo.init({
  callback: function(element, op) {
    if(op === 'load') {
      element.classList.add('loaded');
    } else {
      element.classList.remove('loaded');
    }
  }
});

.render()

调用此方法可以在不滚动窗口的情况下触发图片加载。

echo.render();

License

MIT license

Amaze UI 微信
在微信上关注我们