也很多的时候容易造成页面加载的速度很慢不能给用户提供很好的体验时懒加载是优化页面加载速度的方法之一。

前端在接受到api返回的数据的时候可以先根据数据总的条数进行遍历给每一项初始化简单的dom进行渲染占位通过IntersectionObserver对每一项元素进行监听当初始dom出现在页面视口的时候需要替换掉初始dom渲染真实dom。

这样可以实现在初始dom出现在视口内时替换掉初始dom渲染真实dom并取消对该dom的监听实现只需加载一次首次加载多少个真实dom取决于可视区域跟初始dom的高度。

与方法一不同之处

方法一元素出现在可视区域内即渲染真实dom一旦消失在可视区域内即渲染初始dom

方法二元素只要出现在可视区域内一次即渲染真实dom并且取消对该dom的监听只需加载一次

LazyBuilder.jsx

LazyController*/constructor(props)

instanceof

lazy_${Math.random().toString(16).slice(2)},}}componentDidMount()

{//

页面初始化时对所有元素进行绑定监听this.controller.observe(this._ref.current,

this.updateShowElement.bind(this));}//

{const

{this.controller.dispose();return;}this.controller.unobserve(this._ref.current);}updateShowElement

{//

元素出现在视口以内this.setState({isLoading:

false,initStyle:

this.props.className].filter(item

typeof

{updateShowElement()}this.unobserve(entry.target);}}});}//

观察指定DOMobserve

callback);this.observer.observe(target);}}//

(target)

{this.observer.unobserve(target);this._map.delete(target);}}//

(target)

停止对所有DOM的观测并销毁IntersectionObserver实例dispose

{if

Error(observer未初始化);}this._map.clear();this.observer.disconnect();this.observer

null;}

{constructor(props){super(props)//

new

{this.controller.dispose();}render(){const

{dataList}

初始dom高度controller{this.controller}

controllerdiv

200px}}{第${item}个元素}/div/LazyBuilder}):

null}/div)}