在 ES7 中使用 async/await 解决图片懒加载问题
随着互联网技术的飞速发展，网页中使用图片已经成为一种非常常见的表现形式。但是对于一些频繁刷新或者网络不稳定的应用场景，过多的图片加载会极大地影响页面性能，从而降低用户的体验。此时，懒加载技术就显得尤为重要。
为了实现懒加载，我们可以使用异步函数 async/await，来优化图片的加载时机，达到优化页面性能的效果。
下面，我们将一步步介绍如何使用 ES7 中的 async/await 解决图片懒加载问题。
- 定义图片占位符
在网页加载过程中，如果页面中图片太多，会导致图片加载变慢，大大影响用户的体验。解决这个问题的方法是可以先定义图片的占位符，等到准备好加载图片的时候再替代掉占位符。
代码如下所示：
<img src="placeholder.png" data-src="realImg.png" />
- 获取需要懒加载的图片
接下来，我们需要获取需要懒加载的图片，此处使用了 document.querySelectorAll 方法来获取文档中的所有需要懒加载的图片。
const lazyLoadImages = () => {
const images = document.querySelectorAll('img[data-src]');
return images;
};- 使用 async/await 实现图片的懒加载
使用 async/await 使得图片的加载变得非常简单清晰明了。首先，我们定义一个异步函数，读取图片的 data-src 属性，并将它赋值给真正的图片 src 属性。
-- -------------------- ---- -------
----- --------- - ----- ------- -- -
----- --- - -------------------------------
-- ------ -------
----- --- ----------------- ------- -- -
----- ------- - --- --------
-------------- - --------
--------------- - -------
----------- - ----
--------- - ----
---
----------------------------------
--- 懒加载图片
最后，实现懒加载图片的功能。在这里，我们遍历所有需要懒加载的图片，为每一个元素调用 loadImage 函数。
const lazyLoadImages = async () => {
const images = document.querySelectorAll('img[data-src]');
for (let img of images) {
await loadImage(img);
}
}现在，我们成功地使用 async/await 解决了图片懒加载的问题，优化了页面性能，提高了用户的体验。
完整的示例代码如下所示：
-- -------------------- ---- -------
------
---- --------------------- ----------------------- --
---- --------------------- ----------------------- --
---- --------------------- ----------------------- --
---- --------------------- ----------------------- --
-------
--------
-- ------------ -------- -------------- --- --
----- --------- - ----- ------- -- -
----- --- - -------------------------------
-- ------ -------
----- --- ----------------- ------- -- -
----- ------- - --- --------
-------------- - --------
--------------- - -------
----------- - ----
--------- - ----
---
----------------------------------
--
-- ----------
----- -------------- - ----- -- -- -
----- ------ - -------------------------------------------
--- ---- --- -- ------- -
----- ---------------
-
-
-- ----------
------------------------------- ----------------
---------以上就是使用 async/await 解决图片懒加载问题的全部流程。希望本文对于前端开发者有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6782300c935627c900fbd0d6