利用reduce()方法将数组拉平。
利用reduce进行迭代,核心的思想是递归实现。
模拟栈实现数组拉平
该方法是模拟栈,在性能上相对最优解。
3.图片懒加载&惰性函数实现图片懒加载其核心的思想就是将img的src属性先使用一张本地占位符,或者为空。然后真实的图片路径再定义一个data-set属性存起来,待达到一定条件的时将data-img的属性值赋给src。
如下是通过scroll滚动事件监听来实现的图片懒加载,当图片都加载完毕移除事件监听,并且将移除html标签。
scroll滚动事件容易造成性能问题。那可以通过IntersectionObserver自动观察img标签是否进入可视区域。
实例化IntersectionObserver实例,接受两个参数:callback是可见性变化时的回调函数,option是配置对象(该参数可选)。
当img标签进入可视区域时会执行实例化时的回调,同时给回调传入一个entries参数,保存着实例观察的所有元素的一些状态,比如每个元素的边界信息,当前元素对应的DOM节点,当前元素进入可视区域的比率,每当一个元素进入可视区域,将真正的图片赋值给当前img标签,同时解除对其的观察。