前端开发中，常常需要使用图片加载完成后的处理操作，比如图片瀑布流、图片轮播等。但是由于图片大小不确定，可能存在某些图片加载比其他图片慢的情况，因此处理图片的时候需要一个插件来确保所有图片都已经加载完成。
npm 包 imagesloaded 就是解决这个问题的一种方案，本文将介绍如何使用 npm 包 imagesloaded，以及使用该插件的示例代码。
安装
首先，我们需要在项目中安装 imagesloaded，可以使用 npm 安装：
npm install imagesloaded
使用
安装完成后，我们可以在代码中引入 imagesloaded：
import imagesLoaded from 'imagesloaded';
下面是一个简单的示例，该示例等到图片全部加载完成后，控制台输出 All images are loaded：
const imgLoad = imagesLoaded( document.querySelector('.images') );
imgLoad.on( 'done', function( instance ) {
console.log('All images are loaded');
});在这个示例中，我们首先创建了一个 imagesloaded 实例 imgLoad，然后通过该实例绑定了一个 done 事件。当 done 事件触发时，会执行指定的回调函数，输出 All images are loaded。
图片瀑布流示例
在实际开发中，我们经常需要实现图片瀑布流效果，下面是一个使用 imagesloaded 实现图片瀑布流的示例代码：
-- -------------------- ---- ------- ----- ----- - -------------------- ------------- ------------- -- ---- ------------ -------------- ---------------- ----- ------- ----- --- ------------------------------ ---------- - ---------------- ---
在这个示例中，我们首先使用了 jQuery Masonry 插件创建了一个瀑布流布局，并设置了列宽、开启了百分比定位等选项。然后，我们使用 imagesLoaded 对 $grid 进行图片加载监听。当图片全部加载完成后，调用 $grid.masonry() 方法重新布局，实现了图片瀑布流效果。
总结
使用 npm 包 imagesloaded 可以方便地实现图片加载监听，确保所有图片都已经加载完成后再进行处理操作。在实际开发中，我们可以根据需要使用该插件实现图片的瀑布流、轮播等效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/96483