从缓存中交换jQuery图像？答案

【问题标题】：jQuery image swap from cache?从缓存中交换jQuery图像？
【发布时间】：2011-08-19 16:51:44
【问题描述】：

我正在使用 jQuery 并在 Firefox 上运行，为可折叠列表交换图像（三角形符号表示列表是展开还是折叠），图像似乎永远不会从缓存中加载，但总是从网。这大大减慢了交换速度。什么可能导致这种情况？

这是我的交换代码示例：

jQuery('img.clickIt').attr('src','http://www.mysite.com/images/expandon.gif');

我尝试过的：

加载要在同一页面上的隐藏 div 中交换的图像，我认为这将允许 jQuery 从缓存中加载图像，但它似乎不起作用。
李>
实现了各种 jQuery 缓存代码，发布在 stakoverflow 和不同的站点上，这似乎也无关紧要。
Firefox 缓存在配置文件中开启。

感谢您的任何想法！

【问题讨论】：

标签： jquery

【解决方案1】：

您还可以检查 www.mysite.com 服务器上内容缓存的设置方式。

在 Apache 中，您可以使用 mod_expires 控制内容缓存：

ExpiresActive on
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# css may change a bit sometimes
ExpiresByType text/css "access plus 1 days"

# special MIME type for icons - see http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon
AddType image/vnd.microsoft.icon .ico
# now we have icon MIME type, we can use it
# my favicon doesn't change much
ExpiresByType image/vnd.microsoft.icon "access plus 3 months"

取自这里：Website image caching with Apache

2) 图片预加载的好功能：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// 用法：

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

取自这里：Preloading images with jQuery

【讨论】：

我已经尝试过各种形式的预加载功能。那么如何在交换代码中使用缓存的图像呢？

【解决方案2】：

改为使用预定义的 CSS 背景（和类名），这样您就可以确保图像被缓存。然后只需交换类名而不是重写 HTML（这会更慢）。

【讨论】：

这是最有用的。我只是懒惰。我处理了这么多系统，很难让它们保持一致。我一开始就应该这样做，但我陷入了 jQuery 模式。感谢您唤醒我的记忆。

【解决方案3】：

在页面运行时加载的图像，无论是通过 html img 元素还是 javascript，都应该被缓存以供后续加载到同一页面上。如果没有发生这种情况，那么以下内容将不会比您已经尝试过的东西更好，但为了反复试验......

您可以进行老式 Javascript 图像预加载，即：

img = new Image();
img.src = "whatever.jpg";

时机成熟：

jQuery('img.clickIt').attr('src', img.src);

不过，我想知道您的某些浏览器设置甚至是托管图像的服务器设置是否正在改变标准缓存功能。

【讨论】：