什么是 progressive-media？
progressive-media 是一个用于实现渐进式加载的 JavaScript 库。传统的加载方式是一次性加载整张图片或整个视频，而渐进式加载是指将数据分成多块，根据用户的网络情况逐渐显示。这种加载方式可以让用户在页面显示不完全时也看到一部分内容，从而提高用户体验。
如何使用 progressive-media？
使用 progressive-media 很简单，只需要执行以下命令进行安装：
--- ------- ----------------- ------
安装完之后，可以通过以下方式创建一个新的 progressive-media 实例：
------ ---------------- ---- ------------------- ----- -- - --- ------------------ ---- --------------------------------------- ------------ ---------- --
这里我们传入了两个参数：src 表示最终要加载的文件链接，placeholder 表示一个小的占位图片，用于渐进式加载过程中的预览。
接下来，我们需要将 pm 对象添加到页面上，可以使用以下代码：
---------------------------------
现在，我们已经完成了 progressive-media 的创建和添加，但是它仍然没有生效。要使其生效，我们需要手动触发加载，可以使用以下代码：
---------
以上操作会以渐进式方式加载图片，直到完全加载出来并替换占位图片。值得注意的是，渐进式加载可能会需要很长时间，视图页面大小和网络情况而定，因此，在加载完毕前，建议在占位图片上加上一个加载中的提示。
progressive-media 实例配置
除了 src 和 placeholder 这两个必选参数，ProgressiveMedia 构造函数还有以下可选参数：
blurred：Boolean，表示是否在第一阶段渲染时显示模糊效果，默认为 true。height：Number，表示最终图片的高度，默认值为 0，表示自适应宽高比。如果指定了值，则宽度也会被指定，图片会被按比例缩放。width：Number，表示最终图片的宽度，默认值为 0。ratio：Number，表示最终图片的宽高比例，如果同时指定了height和width，以ratio的指定值为准。
结语
以上是 progressive-media 的简单使用教程，其实它还可以更加灵活地支持更多功能，例如自定义渐进式加载步长、监听加载事件等。在实际开发中，可以针对具体的需求进行选择性定制。希望读者可以从本文中了解到 progressive-media 的基本使用方法，并在实际项目中运用到。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671a630d09270238224e2