Question

我正在使用jQuery并在Firefox上运行，交换图像以获取可折叠列表（三角形符号表示列表是否已展开或折叠），并且图像似乎永远不会从缓存中加载，但始终从净。这大大减缓了交换速度。可能导致这种情况的原因是什么？

这是我的交换代码示例：

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

我的尝试：

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

感谢您的任何想法！

Answer 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

Answer 2

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

Answer 3

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

你可以做旧学校的Javascript图片预加载，即：

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

到时候：

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

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

jQuery图像从缓存交换？

3 个答案: