npm 包 progressive-media 使用教程

什么是 progressive-media？

progressive-media 是一个用于实现渐进式加载的 JavaScript 库。传统的加载方式是一次性加载整张图片或整个视频，而渐进式加载是指将数据分成多块，根据用户的网络情况逐渐显示。这种加载方式可以让用户在页面显示不完全时也看到一部分内容，从而提高用户体验。

如何使用 progressive-media？

使用 progressive-media 很简单，只需要执行以下命令进行安装：

npm install progressive-media --save

安装完之后，可以通过以下方式创建一个新的 progressive-media 实例：

import ProgressiveMedia from 'progressive-media'

const pm = new ProgressiveMedia({
  src: 'https://example.com/images/image.jpg',
  placeholder: 'tiny.jpg'
})

这里我们传入了两个参数：src 表示最终要加载的文件链接，placeholder 表示一个小的占位图片，用于渐进式加载过程中的预览。

接下来，我们需要将 pm 对象添加到页面上，可以使用以下代码：

document.body.appendChild(pm.dom)

现在，我们已经完成了 progressive-media 的创建和添加，但是它仍然没有生效。要使其生效，我们需要手动触发加载，可以使用以下代码：

pm.load()

以上操作会以渐进式方式加载图片，直到完全加载出来并替换占位图片。值得注意的是，渐进式加载可能会需要很长时间，视图页面大小和网络情况而定，因此，在加载完毕前，建议在占位图片上加上一个加载中的提示。

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