Javascript 在AngularJS中缓存图像（使用md virtual repeat）

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

我正在使用创建一个应用程序。我有大约5000行的表格数据，我正在将它们加载到一个虚拟的重复容器中

如果您不熟悉，简而言之，这会将显示的数据限制为视口中适合的行数，并在用户滚动时动态加载输入/输出数据，从而显著降低页面负载。太棒了！（我已从~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头像）。

如今，通过图形访问图片似乎是指向“当前”资源的指针。因此，样式规则中的url是检索当前图片的方法。图形url是无缓存url，因为它重定向到当前资源（即，它不是）

因此，对于浏览器来说，在不强制假定图像未更改的情况下进行缓存似乎很困难

---

根据您的情况，通过应用程序服务器代理请求将为您提供一些缓存控制。您可以放弃缓存标头操作，并将代理与Angular一起使用，以便在应用程序状态期间或从创建的缓存中删除这些对象之前，将它们保留在内存中一定要小心将可能拥有的数据量缓存到内存中。

您需要检查这些图像请求的缓存头。也许Facebook不允许浏览器将这些图像存储在缓存中。还有，这是否在所有broswers中都会发生？@MoshFeu当我在Chrome的资源面板中查看时，我看到数百张图片加载在那里，所以发生了一些事情。也许这是虚拟重复容器的实际渲染问题？如何检查？在

网络
选项卡中检查。单击其中一个图像并检查请求的标题。检查expires标题。@MoshFeu在我不知情的情况下，标题看起来很好吗？也许这就是原因。在图像的标题
缓存控制
中有
无变换
。现在，根据，这个值导致资源下载缓慢。我有点明白你的意思，但如果你看一下OP上的评论，你会发现它看起来像是在缓存图像，对此有何回应？看起来图像正在缓存，但浏览器无法识别图像是否属于内联样式中的重定向url。因此，缓存的图像属于fbcdn.net url，而不是facebook.com url。浏览器可以按照自己的意愿自由处理这个问题。很多时候，你必须依赖原始URL的策略，在本例中，该策略告诉浏览器重新验证。