通过ajax手动缓存图像？答案

【问题标题】：Manually cache images via ajax?通过ajax手动缓存图像？
【发布时间】：2014-05-11 03:21:40
【问题描述】：

所以我有一个网站，有 3 个页面，背景非常丰富，我想知道是否可以通过主页上的 AJAX 手动缓存图像，这样当用户转到新页面时，大图已加载。

我正在使用 rails/turbolinks。我知道一定有办法，但我想知道是否有人知道最佳做法。

【问题讨论】：

【解决方案1】：

以下是解决问题的方法：

JavaScript： 有一篇相当不错的文章叫做Simple Asset Management，他描述了一个非常好的预加载机制。当您拥有庞大的资产列表并且无法一次全部下载时，非常推荐使用它。

CSS：还有CSS technique，您描述了您希望在CSS 中预加载的所有图像，其余的留给浏览器。

HTM5：如果您需要一种 HTML5 方法，HTML5 已经有了一个名为 rel="prefetch" 的新属性：

<link rel="prefetch" href="http://asset.to.prefetch/imgs/sprite.png" />

希望对你有帮助。

【讨论】：

【解决方案2】：

是的，这是可能的。

在页面加载事件之后（避免缓存图片减慢当前页面速度的时候）一个$.load函数，像这样：

$(document).load(function() {
    $.load("www.domain.com.br/img/image-to-pre-cache.jpg");
});

这应该可以...但是，如果不起作用，您也可以使用

$(document).load(function() {
    $('<img/>')[0].src = "www.domain.com.br/img/image-to-pre-cache.jpg";
});

【讨论】：