通过ajax手动缓存图像？

Question

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

我正在使用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 =＆＃34; prefetch＆＃34;的新属性：

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

More about HTML5 rel prefetch

希望它有所帮助。