react 使用 lazyload 懒加载图片

文档地址

index.html

    <script>
      (function(w, d) {
        var b = d.getElementsByTagName("body")[0];
        var s = d.createElement("script");
        var v = !("IntersectionObserver" in w) ? "8.17.0" : "10.19.0";
        s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.
        s.src =
          "https://cdn.jsdelivr.net/npm/vanilla-lazyload@" +
          v +
          "/dist/lazyload.min.js";
        w.lazyLoadOptions = {
          /* Your options here */
        };
        b.appendChild(s);
      })(window, document);
    </script>

util.js

export const initLazyLoad = el => {
  return new window.LazyLoad({
    container: el,
    load_delay: 300,
  });
};

使用

lazyLoad = null;

  async componentDidMount() {
    this.lazyLoad = util.initLazyLoad(this.wraper.current);
    // 数据加载完，更新下懒加载配置
    await store.getListData();
    this.lazyLoad.update();
  }

<div ref={this.wraper}>
    <img data-src="../img/44721746JJ_15_a.jpg" width="220" height="280">
    <!-- More images -->
</div>