在前端开发中，常常需要对网页上的图片进行一些操作，比如判断图片是否已经加载完成。而jquery.imagesloaded就是一个可以检测图片是否加载完毕的npm包，非常实用。
1. 安装
安装jquery.imagesloaded很简单，只需要在终端中输入以下命令即可：
--- ------- ------------ ------
2. 使用方法
使用jquery.imagesloaded也非常方便，只需要在你的HTML文件中引入jQuery和imagesloaded.js文件，并编写相应的代码即可。
------- ----------------------------------------------------------------------------
------- --------------------------------------------------------------------
---- ---------------
---- ---------------- --
---- ---------------- --
---- ---------------- --
------
--------
----------------------------- ---------- -
---------------- ------ --- ---------
---
---------在这段代码中，我们首先引入了jQuery和imagesloaded.js文件。然后我们在HTML中定义了一个包含三张图片的容器，并且给这个容器添加了id属性为“container”。最后，我们通过jQuery选择器选中了这个容器，并调用了imagesLoaded方法，当所有的图片加载完成后，会执行回调函数内部的代码。
3. 示例代码
3.1 使用imagesLoaded检测图片是否加载完成
------- ----------------------------------------------------------------------------
------- --------------------------------------------------------------------
---- ---------------
---- ---------------- --
---- ---------------- --
---- ---------------- --
------
--------
----------------------------- ---------- -
---------------- ------ --- ---------
---
---------3.2 使用imagesLoaded处理图片加载失败的情况
------- ----------------------------------------------------------------------------
------- --------------------------------------------------------------------
---- ---------------
---- ---------------- --------------------------- ---------------------------- --
---- ---------------- --------------------------- ---------------------------- --
---- ---------------- --------------------------- ---------------------------- --
------
--------
------------------------------
------ ---------- -
---------------- ------ --- ---------
--
------ ---------- -
---------------- -- ---- ------ ------ -- -------
---
---------在上面的代码中，我们使用了onerror事件来处理图片加载失败的情况。如果图片加载失败，就会触发onerror事件，并且使用一张占位图代替它。当所有的图片都加载完成之后，会执行done方法内部的代码；当有一张或多张图片加载失败时，会执行fail方法内部的代码。
4. 总结
通过本文，我们学习了如何使用jquery.imagesloaded这个npm包来检测图片是否加载完成，并且处理了图片加载失败的情况。在实际开发中，这个工具非常实用，可以帮助我们更好地处理图片加载的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32674