ant-design-vue/components/vc-lazy-load/demo/index.jsx

import LazyLoad from '../src/LazyLoad';

import './style.less';

const Application = {
  render() {
    return (
      <div>
        Scroll to load images.
        <div class="filler" />
        <LazyLoad height={762} offsetVertical={300}>
          <img src="http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg" />
        </LazyLoad>
        <div class="filler" />
        <LazyLoad height={683} offsetVertical={300}>
          <img src="http://apod.nasa.gov/apod/image/1502/2015_02_20_conj_bourque1024.jpg" />
          <span />
        </LazyLoad>
        <div class="filler" />
        <div class="ScrollableContainer">
          <div class="filler" />
          <div class="filler" />
          <div class="filler" />
          <LazyLoad height={480}>
            <img src="http://apod.nasa.gov/apod/image/1502/MarsPlume_jaeschke_480.gif" />
          </LazyLoad>
        </div>
        <div class="filler" />
        <LazyLoad height={720} offsetVertical={300}>
          <img src="http://apod.nasa.gov/apod/image/1502/ToadSky_Lane_1080_annotated.jpg" />
        </LazyLoad>
        <div class="filler" />
      </div>
    );
  },
};

export default Application;