javascript 技巧,javascript正确使用

首页 > 经验 > 作者:YD1662022-11-01 09:59:45

利用reduce()方法将数组拉平。

利用reduce进行迭代,核心的思想是递归实现。

javascript 技巧,javascript正确使用(9)

模拟栈实现数组拉平

该方法是模拟栈,在性能上相对最优解。

javascript 技巧,javascript正确使用(10)

3.图片懒加载&惰性函数

实现图片懒加载其核心的思想就是将img的src属性先使用一张本地占位符,或者为空。然后真实的图片路径再定义一个data-set属性存起来,待达到一定条件的时将data-img的属性值赋给src。

如下是通过scroll滚动事件监听来实现的图片懒加载,当图片都加载完毕移除事件监听,并且将移除html标签。

javascript 技巧,javascript正确使用(11)

scroll滚动事件容易造成性能问题。那可以通过IntersectionObserver自动观察img标签是否进入可视区域。

实例化IntersectionObserver实例,接受两个参数:callback是可见性变化时的回调函数,option是配置对象(该参数可选)。

当img标签进入可视区域时会执行实例化时的回调,同时给回调传入一个entries参数,保存着实例观察的所有元素的一些状态,比如每个元素的边界信息,当前元素对应的DOM节点,当前元素进入可视区域的比率,每当一个元素进入可视区域,将真正的图片赋值给当前img标签,同时解除对其的观察。

javascript 技巧,javascript正确使用(12)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.