通过ajax手动缓存图像？

Question

所以我有一个3页的网站有非常丰富的背景，我想知道是否有可能通过AJAX在手册页上手动缓存图像，以便当用户进入新页面时，大图像已经加载。

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

Answer 1

是的，这是可能的。

使用后，页面加载事件（避免缓存图片减缓当前页面的速度时间）一个$ .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"; 
}); 

Answer 2

这里是你如何能解决你的问题：

的JavaScript：有一个相当不错的一篇名为Simple Asset Management谁描述了一个非常好的预加载机制。当你有一个巨大的资产清单时，建议使用它，而且你不能一次全部下载它。

CSS：还有CSS technique，你描述了所有图像，你想要在你的CSS预加载，并将其余的浏览器。

HTM5：如果你需要一个HTML5的做法，HTML5已经有一个名为的rel = “预取” 新属性：

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

More about HTML5 rel prefetch

希望它能帮助。