前端开发是一个复杂而有趣的领域，因为你需要掌握多种技术来实现网站或应用程序的功能。为了协调和简化这些过程，前端开发人员使用了一些工具，其中一个是 npm。
npm 是一个在 JavaScript 社区中广泛使用的软件包管理器，因此它被广泛用于编写前端代码。在本文中，我们将探讨一种名为 @egjs/lazyloaded 的 npm 包，它可以帮助你优化前端图片加载的效率。本文将详细介绍如何使用此软件包。
前提条件
在使用 @egjs/lazyloaded 之前，请确保你已经安装了 npm 和 Node.js。如果没有，你可以从官方网站下载它们以进行安装。
您还需要了解一些 JavaScript 和 jQuery 的基础知识。
安装软件包
要使用 @egjs/lazyloaded，首先需要安装它。在终端中运行以下命令：
npm install @egjs/lazyloaded
这将安装软件包并将其添加到您的项目中。
创建 HTML 元素
使用 @egjs/lazyloaded 的第一步是在 HTML 中创建要延迟加载的图像元素。为此，请使用 data-* 属性来指定要加载的图片的 URL：
<img src="placeholder.jpg" data-src="image-to-lazyload.jpg" class="lazyload" />
其中，data-src 属性中存储了要延迟加载的图像的 URL。这个 URL 只有在需要时才会加载。class 属性设置为 lazyload，以便 @egjs/lazyloaded 了解哪些元素应该懒惰地加载。
初始化 @egjs/lazyloaded
接下来，您需要使用 JavaScript 初始化 @egjs/lazyloaded。为此，您需要了解 jQuery。
在 HTML 中，您可以将以下命令添加到 <head> 标签中：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="node_modules/@egjs/lazyloaded/dist/lazyloaded.min.js"></script>
这将加载 jQuery 和 @egjs/lazyloaded 的 JavaScript 文件。
接下来，您需要在您的 JavaScript 文件中初始化 @egjs/lazyloaded。首先，为所有将被延迟加载的图像元素添加一个 loading 类：
$('img.lazyload').addClass('loading');接下来，加载 lazyloaded 并初始化它：
$.getScript('node_modules/@egjs/lazyloaded/dist/lazyloaded.min.js', function() {
$('.lazyload').Lazy();
});现在 @egjs/lazyloaded 已准备好了。
自定义加载效果
最后，您可以自定义 @egjs/lazyloaded 的加载效果。您可以在 loading 类中添加 CSS，以便在加载时显示自定义拉伸图像或动画。
例如，以下 CSS 可以用于显示加载状态：
.loading {
background: url('spinner.gif') no-repeat center center;
}示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------------- ------------
------- -----------------------------------------------------------
------- --------------------------------------------------------------------
-------
-------- -
----------- ------------------ --------- ------ -------
-
--------
-------
------
-------------------- ---------
---- --------------------- -------------------------------- ---------------- --
---- --------------------- ---------------------------------- ---------------- --
---- --------------------- ---------------------------------- ---------------- --
--------
--------------------------------------
------------------------------------------------------------------- ---------- -
----------------------
---
---------
-------
-------结论
使用 @egjs/lazyloaded，您可以提高您的网站的性能，特别是当有大量图像需要在页面上加载时。此软件包可以使您的网站更快，更可靠，并提供更好的用户体验。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef85899403f2923b035b972