Question

我正在预加载图像：

$(function() {
window.onload = function() {

// Preloading colorized hover images
var bildliste_color = new Array();
var j;
for (j = 0; j < 14; j++)    { 
    bildliste_color[j] = "images/works/work_art/middle/work_middle_art" + (j+1) + ".png";
}

var image_color = new Array();
for (j=0; j < bildliste_color.length; j++) {
        image_color[j] = new Image();
        image_color[j].src = bildliste_color[j];
}


// Preloading work_art_large_images
var bildliste_large = new Array();
var i;
for (i = 0; i < 14; i++) {
        bildliste_large[i] = "images/works/work_art/large/work_large_art" + (i+1) + ".png";
        console.log(i);
        console.log(bildliste_large[i]);

}
var image_large = new Array();
for (i=0; i < bildliste_large.length; i++) {
    image_large[i] = new Image();
        image_large[i].src = bildliste_large[i];
}
}



});

我正在预加载这些图像，以便在悬停时需要这些图像进行缓存而不会再次下载。我使用jquery悬停功能实现了这一点：

$(document).ready(function() { 
$("#incontent_work_art img").hover(function() {
    oldsrc = $(this).attr("src"); 
    var newsrc = $(this).attr("src").replace("images/works/work_art/middle/work_middle_art01sepia.png", "images/works/work_art/middle/work_middle_art1.png"); 
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art02sepia.png", "images/works/work_art/middle/work_middle_art2.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art03sepia.png", "images/works/work_art/middle/work_middle_art3.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art04sepia.png", "images/works/work_art/middle/work_middle_art4.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art05sepia.png", "images/works/work_art/middle/work_middle_art5.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art06sepia.png", "images/works/work_art/middle/work_middle_art6.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art07sepia.png", "images/works/work_art/middle/work_middle_art7.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art08sepia.png", "images/works/work_art/middle/work_middle_art8.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art09sepia.png", "images/works/work_art/middle/work_middle_art9.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art10sepia.png", "images/works/work_art/middle/work_middle_art10.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art11sepia.png", "images/works/work_art/middle/work_middle_art11.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art12sepia.png", "images/works/work_art/middle/work_middle_art12.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art13sepia.png", "images/works/work_art/middle/work_middle_art13.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art14sepia.png", "images/works/work_art/middle/work_middle_art14.png");


        $(this).attr("src", newsrc);

    }, function() { 
        $(this).attr("src", oldsrc); 
});
});

这肯定不是世界上最好的代码，但我还在学习。目前的问题是，如果我将鼠标悬停在图像上，大部分时间都会被firefox再次下载。即使我可以看到所有图像都是由Firefox先前下载的。有时这些图像是由firefox从缓存中加载的，但似乎在一段时间之后再次下载图像。我用opera和Chromium对它进行了测试，它在那里运行良好。那么为什么Firefox一次又一次地下载图像呢？我希望它们被缓存！

我很感激任何好的建议。

编辑：它也适用于IE。可能是由于预加载的图像没有被添加到window.document.images数组而引起问题？本质上不在DOM中？我的问题似乎有点与此完全相关：

Image preloading isn't working for images in FireFox

但遗憾的是没有给出任何解决方案。

Answer 1

由于您完全用新的URL替换旧URL，垃圾收集器可能决定释放内存，因为它不知道您是否会再次使用它们。你不能真正假设Firefox是如何工作的（也不是IE或任何其他浏览器）。您最好的选择是同时在网页中同时拥有两组图像，并使用样式表display:none选择您不想显示的图像集。

预加载不在Firefox中运行的图像？

1 个答案: