LazyImage 3.0.2

懒加载图片组件，只能在 Scroller 和 List 中使用。

使用这个组件代替img标签后，会延迟加载这个图片，直到List组件的滚动使得该图片位于可视区域之内。

使用说明

引用方式

由于 LazyImage 是配合 List 或 Scroller 使用的，所以只需要按需引用 List 或 Scroller 即可。

import { List, Scroller } from '$yo-component';

// 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
// 你仍然可以通过下面这种方式来引用
import List from 'yo3/component/list';
import Scroller from 'yo3/component/scroller';

在 List 中使用

在 List 中使用 LazyImage 只需要将 <image> 标签替换成 <List.LazyImage> 即可。需要注意的是， 为了提高 List 组件的性能，使用的时候，必须给图片设置高度，可以通过 height 属性或 style 属性来设置。

<List
  dataSource={[
    {text: '0', key: 0},
    {text: '1', key: 1},
    // ...
    {text: '99', key: 99},
  ]}
  renderItem={item => {
    return (
      <div>
        <List.LazyImage height="50" src="http://source.qunarzz.com/common/hf/logo.png"/>
      </div>
    )};
  }
  itemHeight={50}
/>

在 Scroller 中使用

在 Scroller 中使用 LazyImage 与在 List 中使用类似，只需要将 <image> 标签替换成 <Scroller.LazyImage> 即可。 虽然 Scroller 中并没有强制需要设置图片的高度，但是为了性能，还是推荐给图片指定高度。

<Scroller>
  <Scroller.LazyImage height="50" src="http://s.qunarzz.com/a/0.png"/>
  <Scroller.LazyImage height="50" src="http://s.qunarzz.com/a/1.png"/>
  {/* ... */}
  <Scroller.LazyImage height="50" src="http://s.qunarzz.com/a/99.png"/>
</Scroller>
属性

defaultImage { String } #

默认图片，在原图片还没有完成加载时展示。

默认值: null

src { String } #

图片src，必需。

默认值: null

className { String } #

给img标签加的类名。

默认值: null

width { Number } #

图片宽度。

默认值: null

height { Number } #

图片高度。

默认值: null

customAttr { Object } #

附加给img dom节点的自定义属性，属性名需要以data-开头。

默认值: null

style { Object } #

附加给img dom节点的style。

默认值: null

alt { String } #

和img标签的alt属性相同。

默认值: null

title { String } #

和img标签的title属性相同。

默认值: null