引言
Web 页面加载较大的图片时，可能会影响网页的加载速度，影响用户体验。为了优化这个问题，可以采用懒加载技术。懒加载就是在用户滚动页面时，按需加载图片，以提高页面加载速度。
在实际场景中，懒加载需要实现一个异步任务，以便在每个图片的加载完成前不阻塞其他的图片加载。ES12 中引入了 Promise.any() 方法，可以用来解决图片懒加载问题。
Promise.any()
Promise.any() 方法接受一个可迭代对象作为参数（如数组），并返回解析的 Promise 对象。该 Promise 会在参数可迭代对象内的任意一个 Promise 成功时解决，如果这些 Promise 都拒绝，则该 Promise 也会拒绝。
语法
Promise.any(iterable);
参数
- iterable：一个可迭代的对象，如 Array。
返回值
返回一个 Promise 对象，该 Promise 对象的解决值是参数内迭代器中的任意一个 Promise 解决值。
Promise.any() 解决图片懒加载问题
考虑以下实现方式：
-- -------------------- ---- -------
----- ---- - -------------------------------------------
-- ----------------------- -- ------- -
----- -------- - --- ---------------------------- -- -
--------------------- -- -
-- ---------------------- -
----- --- - -------------
------- - ----------------
--------------------------------
------------------------
-
---
---
---------------- -- -
----------------------
---
- ---- -
----- ------- - --- -- -
------- - ----------------
--------------------------------
--
----------------------
-该方式使用 IntersectionObserver API 监听图片是否进入可视区域，如果进入，则加载图片。但是，在不支持 IntersectionObserver API 的浏览器中，该方式会立即加载图片，无法达到懒加载的效果。
在这种情况下，可以使用 Promise.any() 方法解决该问题，代码如下：
-- -------------------- ---- -------
----- ---- - -------------------------------------------
-- ----------------------- -- ------- -
----- -------- - --- ---------------------------- -- -
--------------------- -- -
-- ---------------------- -
----- --- - -------------
-------------------- -- -
--------------------------------
------------------------
---
-
---
---
---------------- -- -
----------------------
---
- ---- -
----- ------- - --- -- -
------ --- --------------- -- -
----- ------- - --- --------
----------- - ----------------
-------------- - -- -- -
------- - ----------------
----------
--
---
--
-------------------------------------- -- -
---------------- -- -
--------------------------------
---
---
-在支持 IntersectionObserver API 的浏览器中，与前面的实现方式相同；在不支持该 API 的浏览器中，Promise.any() 方法可以将图片的加载异步化，在图片加载完成后再一次性将图片显示出来，达到懒加载效果。
总结
ES12 中的 Promise.any() 方法提供了解决图片懒加载问题的新方式，使得图片的加载更加优雅地实现异步加载，减少网页的加载时间，提升用户体验。开发者可以应用 Promise.any() 方法来实现其他类似的异步任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459f130968c7c53b0c0c28f