Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

amazeui-echo

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

amazeui-echo

echo.js 结合 Amaze UI 使用示例

  • 1.7.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4
increased by300%
Maintainers
1
Weekly downloads
 
Created
Source

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 有以下几个选项:

  • offset

    类型:Number|String,默认: 0

    offset 用于设置距离视口多远(水平、垂直方向)时开始载入图片, 为 0 时,图片进入视口以后立即加载。

  • offsetVertical

    类型: Number|String,默认: offset 选项的值

    设置图片距离视口垂直方向上距离多少时开始载入图片。

  • offsetHorizontal

    类型: Number|String,默认: offset 选项得值

    设置图片距离视口水平方向上距离多少时开始载入图片。

  • offsetTop

    类型: Number|String,默认: offsetVertical 的值

    图片距离顶部多少时开始载入图片。

  • offsetBottom

    类型:Number|String,默认:offsetVertical 的值

    图片距离底部多少时开始载入图片。

  • offsetLeft

    类型: Number|String,默认:offsetVertical 的值

    图片距离左侧多少时开始载入图片

  • offsetRight

    类型: Number|String,默认:offsetVertical 的值

    图片距离右侧多少时开始载入图片

  • throttle

    类型:Number|String,默认:250

    控制 window.onscroll 触发频率,以避免过于频繁导致性能问题,默认为 250 毫秒。

  • debounce

    类型: Boolean,默认:true

    debounce,用户停止滚动时才触发位置检测函数。

  • unload

    类型:Boolean,默认:false

    图片超过视口时不加载。

  • callback

    类型: Function

    回调函数接受两个参数,第一个为当前元素,第二个为操作状态(如 loadunload)。

下面的代码会在图片加载完成后添加 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

Keywords

FAQs

Package last updated on 07 Jul 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc