在现代 Web 开发中，图片占据了网页的很大比例。而对于用户来说，响应速度是评估一个网站的最主要标准之一。因此图片的加载速度就显得尤为重要。
为此，我们比较常见的做法是使用图片缓存。那么如何在 Ember.js 中使用图片缓存呢？很简单，我们可以使用一个 npm 包，它叫做 ember-img-cache。本文将详细讲解如何使用 ember-img-cache。
安装
你可以使用 npm 命令来安装 ember-img-cache：
npm install --save-dev ember-img-cache
用法
在使用之前，先打开所需组件的路径：
import ImgCache from 'ember-img-cache';
配置
使用 ImgCache.init() 方法来进行配置。你可以将以下内容添加到 app.js 文件中：
ImgCache.init({
usePersistentCache: true,
cachePrefix: 'imgCache~',
debug: false
});在这个例子中，我们设置了使用持久缓存，设置了缓存前缀，并关闭了调试模式。
加载图片
现在我们来到重头戏：如何加载图片。
在 Ember.js 中，你可以使用 <img> 标签来加载图片。使用 ember-img-cache 后，你可以为 <img> 标签添加 data-img-cache="auto" 属性来进行图片缓存。例如：
<img src="http://img.example.com/our/image.png" data-img-cache="auto" />
清除缓存
如果需要清除缓存，你可以使用 ImgCache.clearCache() 方法。
独立使用
如果你不使用 Ember.js 框架，而是单独使用 ember-img-cache，那么你可以使用 ImgCache.isCacheable(path) 方法来检查图片是否有缓存，使用 ImgCache.cacheFile(path) 方法来缓存图片。
示例代码
-- -------------------- ---- -------
------ -------- ---- ------------------
---------------
------------------- -----
------------ ------------
------ -----
---
------ ------- ------------------
------------------ -
--------------------------
---------------- -- -
--------------------------- ---- ------------
---
--
---<img src="http://img.example.com/our/image.png" data-img-cache="auto">
总结
ember-img-cache 这个 npm 包提供了非常方便的方法来缓存图片，而在 Ember.js 中使用更是得心应手。在开发网站时，使用缓存技术可以有效提高网站的性能与用户体验。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecb0f