在 ES7 中使用 async/await 解决图片懒加载问题

在 ES7 中使用 async/await 解决图片懒加载问题

随着互联网技术的飞速发展，网页中使用图片已经成为一种非常常见的表现形式。但是对于一些频繁刷新或者网络不稳定的应用场景，过多的图片加载会极大地影响页面性能，从而降低用户的体验。此时，懒加载技术就显得尤为重要。

为了实现懒加载，我们可以使用异步函数 async/await，来优化图片的加载时机，达到优化页面性能的效果。

下面，我们将一步步介绍如何使用 ES7 中的 async/await 解决图片懒加载问题。

1. 定义图片占位符

在网页加载过程中，如果页面中图片太多，会导致图片加载变慢，大大影响用户的体验。解决这个问题的方法是可以先定义图片的占位符，等到准备好加载图片的时候再替代掉占位符。

代码如下所示：

<img src="placeholder.png" data-src="realImg.png" />

1. 获取需要懒加载的图片

接下来，我们需要获取需要懒加载的图片，此处使用了 document.querySelectorAll 方法来获取文档中的所有需要懒加载的图片。

const lazyLoadImages = () => {
  const images = document.querySelectorAll('img[data-src]');
  return images;
};

1. 使用 async/await 实现图片的懒加载

使用 async/await 使得图片的加载变得非常简单清晰明了。首先，我们定义一个异步函数，读取图片的 data-src 属性，并将它赋值给真正的图片 src 属性。

-- -------------------- ---- -------
----- --------- - ----- ------- -- -
  ----- --- - -------------------------------
  -- ------ -------
  ----- --- ----------------- ------- -- -
    ----- ------- - --- --------
    -------------- - --------
    --------------- - -------
    ----------- - ----
    --------- - ----
  ---
  ----------------------------------
--

1. 懒加载图片

最后，实现懒加载图片的功能。在这里，我们遍历所有需要懒加载的图片，为每一个元素调用 loadImage 函数。

const lazyLoadImages = async () => {
  const images = document.querySelectorAll('img[data-src]');
  for (let img of images) {
    await loadImage(img);
  }
}

现在，我们成功地使用 async/await 解决了图片懒加载的问题，优化了页面性能，提高了用户的体验。

完整的示例代码如下所示：

-- -------------------- ---- -------
------
  ---- --------------------- ----------------------- --
  ---- --------------------- ----------------------- --
  ---- --------------------- ----------------------- --
  ---- --------------------- ----------------------- --
-------
--------
  -- ------------ -------- -------------- --- --
  ----- --------- - ----- ------- -- -
    ----- --- - -------------------------------
    -- ------ -------
    ----- --- ----------------- ------- -- -
      ----- ------- - --- --------
      -------------- - --------
      --------------- - -------
      ----------- - ----
      --------- - ----
    ---
    ----------------------------------
  --

  -- ----------
  ----- -------------- - ----- -- -- -
    ----- ------ - -------------------------------------------
    --- ---- --- -- ------- -
      ----- ---------------
    -
  -

  -- ----------
  ------------------------------- ----------------
---------

以上就是使用 async/await 解决图片懒加载问题的全部流程。希望本文对于前端开发者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782300c935627c900fbd0d6