在前端开发中，经常需要在加载图像等资源后执行一些特定的操作，比如调整页面布局或者显示加载完成的提示信息。但是由于图像和其他资源的加载时间取决于网络速度和服务器性能等因素，因此无法确定加载完成的时间。而 npm 包 jquery.waitforimages 就是为此而生的工具。
什么是 jQuery.waitForImages
jQuery.waitForImages 是一个用于等待图片或其他资源加载完成后触发回调函数的 jQuery 插件。它可以检测某个元素内部的所有图片是否已完全加载，并在加载完成后触发回调函数。该插件非常适合在进行图片懒加载、瀑布流布局等场景下使用。
安装
通过 npm 安装：
npm install jquery.waitforimages
也可以直接引入相关的 JavaScript 文件，例如：
<script src="jquery.min.js"></script> <script src="jquery.waitforimages.min.js"></script>
基本用法
以下是一个基本的例子：
$('selector').waitForImages(function() {
// do something
});其中，selector 为需要等待加载的元素选择器，回调函数则是在所有元素内图片加载完成后触发的函数。
如果想要对每个图片都做出不同的处理，可以将回调函数改写成以下形式：
$('selector').waitForImages({
finished: function() {
// do something after all images have been loaded
},
each: function() {
// do something for each individual image as it is loaded
}
});其中，finished 函数在所有元素内图片加载完成后执行一次，而 each 函数则是在每个图片加载完成后都会执行。
高级用法
可以对插件进行一些配置来满足特定的需求。以下是一些常用的配置项：
waitForAll: 是否等待所有图片加载完成后才触发回调函数（默认为 true）；each: 每个图片加载完成时要执行的函数；finished: 所有图片加载完成后要执行的函数；waitForParent: 是否只在父元素内部等待图片加载完成（默认为 false）；eachIndex: 在each函数中传入当前图片的索引值。
例如：
-- -------------------- ---- -------
-----------------------------
----------- -----
--------- ---------- -
---------------- ------ ---- ---- ----------
--
----- ---------- -
--------------- ----- --- ---- ----------
--
-------------- ------
---------- --------------- ------ -
------------------ - - ----- - - ---- --- -- - --------- - -- --- ---- ----------
-
---注意事项
- 如果图片已经缓存，那么回调函数会立即执行，而不是等待所有图片重新加载；
- 插件只能检测到 HTML 中写明的 img 标签的图片，不能检测通过 JavaScript 动态创建的图片；
- 图片加载完成后会触发
load事件，如果某些元素上已经绑定了该事件，可能会导致冲突。
结语
jQuery.waitForImages 是一个非常有用的工具，可以帮助开发人员在等待图片和其他资源加载完成时执行特定的操作。但是，在使用过程中需要注意一些细节，以免出现问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35201