React 优化图片加载方式记录

方式一：懒加载

可以使用 react-lazyload 懒加载复杂组件，路由或者图片等，

使用方式：

import LazyLoad, { forceCheck ,forceVisible} from 'react-lazyload';

<LazyLoad scrollContainer=".img-list" offset={100} unmountIfInvisible={true}>
    <img src={path} />
</LazyLoad>
//scrollContainer 是滚动容器的结点，懒加载默认监听容器的滚动事件

注意：

1. 只有一个子元素能够通过 
2. 已经加载的元素在隐藏容器，或者改变容器大小时不会再次加载（有缓存) 
3. forceVisible强制显示组件，而不考虑元素在视口中是否可见。
4. forceCheck 强制检查 它可用于手动触发对视口中元素的检查

方式二：预加载图片

react-preload 用于预加载图像的组件，在加载器阶段呈现传递的组件，并在成功获取图像后呈现其子组件

const loadingIndicator = <div>加载中...</div>;//加载过程中显示的节点
    <Preload
      loadingIndicator={loadingIndicator}
      images={[img_id]}//加载的图片地址
      autoResolveDelay={3000}
      resolveOnError={true}
      mountChildren={true}
    >
      <img src={img_id} />//加载成功之后显示的子节点
    </Preload>