Chrome / Firefox缓存图片问题

时间:2013-02-22 19:03:10

标签: javascript html5 google-chrome firefox

我在预装图像和动态创建元素时遇到了麻烦。该脚本加载图像URL列表,创建画布元素等。

问题是,在随后的“软”刷新或提交相同的URL时,不会启动预加载循环,因此不会创建画布元素等。我很确定这与资源缓存有关 - 但是 - 为什么脚本没有遍​​历图像URL列表并按预期构建DOM我不确定... Here's an example

页面上的JavaScript是优化输出,但预加载循环如下所示:

// Images array
var images = [];

for (var i = 0; i < l.length; ++i) {
    // Create canvas element
    var canvas = document.createElement('canvas');
    // Canvas element properties
    canvas.width = l[i].w;
    canvas.height = l[i].h;
    canvas.style.display = 'none';
    // Image element + mouse over event
    images[i] = document.getElementById('i' + i).getElementsByTagName('img')[0];
    images[i].addEventListener('mouseover', function() {
        handleCanvas(this);
    }, false);
    // Push canvas into DOM
    images[i].parentNode.insertBefore(canvas, images[i]);
    // Preload item from processed images list
    var image = new Image;
    image.src = l[i].i;
}

如果可能,我宁愿不使用标题或“URL?random = 37436464”类型修复。在Ubuntu 12.10上测试了夜间版本的Chrome和Firefox。

1 个答案:

答案 0 :(得分:0)

经过进一步调查(在IE9中测试)后,问题似乎是异步加载JavaScript和滞后变量启动造成的。