为了让前端页面展示更流畅，我们常常需要使用图片预加载等技术。其中，一项常见的技术是 ImagesLoaded。它可以帮助我们在页面加载完毕后，确定图片是否已经加载完成。而如果使用 Typescript 编写我们的代码，就需要使用@types/imagesloaded这个 npm 包。本文将为大家详细介绍该包的使用方法。
安装
首先，我们需要安装@types/imagesloaded这个 npm 包，在命令行中输入以下命令：
npm install --save @types/imagesloaded
注意，这个命令只会安装@types/imagesloaded这个包，并不会安装原生的 ImagesLoaded。
使用
安装好之后，我们就可以在 TypeScript 代码中使用ImagesLoaded了。以下是一个简单的示例代码：
import * as ImagesLoaded from 'imagesloaded';
const images = document.querySelectorAll('img');
const loader = ImagesLoaded(images);
loader.on('done', () => {
console.log('所有图片都已经加载完成！');
});代码中，我们首先通过document.querySelectorAll方法获取页面上所有的图片。然后调用ImagesLoaded方法将这些图片传入，并指定一个回调函数，在所有图片加载完成时触发。
更详细的使用方案可以参考官方文档：https://github.com/desandro/imagesloaded
示例
以下是一个使用ImagesLoaded库实现图片预加载的例子。当所有图片都加载完成后，我们将页面中所有图片的高度设置为它们本身的高度，从而使图片排列更整齐。
-- -------------------- ---- -------
---- ---- ---
---- -------------
---- ------------------
---- ----------- -------
------
---- ------------------
---- ----------- -------
------
---- ------------------
---- ----------- -------
------
-------- -------------------- ---- ------- -- --- -- ----- - -------- ----- ---------- ----- ---------------- -------------- - ---------- - ------ ----------- - ------ -------------- ----- - --- - -------- ------ ------ ----- ------- ----- -
-- -------------------- ---- -------
-- ----------
------ - -- ------------ ---- ---------------
----- ------ - ---------------------------------
----- ------ - ---------------------
----------------- -- -- -
----- --------- - ----------------------------------------
------------------------ ------------ -- -
----- --- - --------------------------
----------------- - -------------------------
---
---在上面的代码中，我们通过调用querySelectorAll方法获取所有图片的元素。然后使用ImagesLoaded库将这些元素传入，并使每个元素的高度等于它本身的高度。当所有图片都成功加载时，界面将呈现更为美观的图片排列。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/194062