npm 包 @mparpaillon/imagesloaded 使用教程

在前端开发过程中，经常需要使用图片加载完成后执行其他操作的功能。@mparpaillon/imagesloaded 是一个 npm 包，用于检测图片是否已加载完成，以方便开发者处理操作。

1. 安装

使用 npm 包管理工具进行安装

npm install @mparpaillon/imagesloaded

然后在需要使用的文件中引入：

import imagesLoaded from '@mparpaillon/imagesloaded';

2. 使用

2.1 加载单张图片

检测单张图片是否已加载完成，并执行回调函数：

const img = document.querySelector('img');
imagesLoaded( img, () => {
  console.log('图片已经加载完成');
});

2.2 加载多张图片

检测多张图片是否已加载完成，并执行回调函数：

const images = document.querySelectorAll('img');
imagesLoaded( images, () => {
  console.log('所有图片已经加载完成');
});

2.3 监听图片加载进度

使用 progress 声明回调函数，以获取图片加载进度：

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

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

2.4 配置项

imagesLoaded 方法接受 options 参数，可以设置以下配置项：

• background：设置是否检测背景图片的加载，默认为 false。

imagesLoaded( '.my-element', { background: true }, function() {
  console.log('所有图片已经加载完成');
});

• once：设置是否只运行一次回调函数，加载多张图片时非常有用，默认为 true。

imagesLoaded( '.my-element', { once: false }, function() {
  console.log('所有图片已经加载完成');
});

• elements：设置需要检测的图片元素，默认为选择器字符串。

const images = document.querySelectorAll('img');
imagesLoaded( images, { elements: '.myImage' }, function() {
  console.log('所有图片已经加载完成');
});

• timeout: 设置加载图片的超时时间，默认为 30s。

imagesLoaded( '.my-element', { timeout: 5000 }, function() {
  console.log('所有图片已经加载完成');
});

3. 示例代码

下面是一个使用 @mparpaillon/imagesloaded 监听图片加载进度的示例代码：

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

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

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

4. 总结

@mparpaillon/imagesloaded 是一个简单易用的 npm 包，用于检测图片是否已加载完成。本文介绍了如何使用该包检测单张图片、多张图片以及监听图片加载进度，并对配置项进行了详细说明。通过使用该包，可以更加方便地处理图片加载的相关操作，提高开发效率。

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