javascript - 在 AngularJS 中缓存图像(使用 md-virtual-repeat)

Question

有个类似的问题here ，但这似乎不适用于我的情况。

我正在使用 Angular-Material 构建应用程序.我有大约 5,000 行的表格数据，我正在将它们加载到虚拟重复容器中。

如果您不熟悉，简而言之，这会将显示的数据限制为适合视口(viewport)的行数，并在用户滚动时动态载入/载出数据，从而显着降低页面负载。这是梦幻般的! (我已经从大约 30 秒的加载时间减少到 >1 秒)

但是，我在每一行中都有一个单元格从 Facebook 中提取图像，看起来像:

 <div style="background-image:url(https://graph.facebook.com/120945717945722/picture?width=200&amp;height=200&amp)" class="avatar"></div>

当我向下滚动页面时，这些图像加载正常，但是当它们从 DOM 中删除时，它们似乎没有被缓存；当我上下滚动重复的表格时，图像会一次又一次地从头开始加载。

我如何确保它们被下载一次然后正确缓存？

澄清一下，每个重复的项目都有不同的图像，但每个项目的图像都没有改变(它们都来自与特定组织关联的 facebook 头像)。

Answer 1

在今天看来，通过图访问图片是指向“当前”资源的指针。因此，样式规则中的 url 是一种检索当前图片的方法。图 url 是一个无缓存 url，因为它重定向到当前资源(即它是)。

因此，对于浏览器来说，在不强制假设图像未发生变化的情况下进行缓存似乎很困难。

根据您的情况，通过您的应用服务器代理请求会给您一些缓存控制。您可以放弃缓存 header 操作，并结合 Angular 的 $cacheFactory 使用代理。在应用程序状态期间将这些对象保留在内存中，或者直到您将它们从 Cache 中删除你创造。 在将您可能拥有的数据量缓存到内存时一定要谨慎。