预加载图像中的相对路径答案

【问题标题】：Relative path in preloading images预加载图像中的相对路径
【发布时间】：2013-10-21 17:31:52
【问题描述】：

这可能是一个愚蠢的问题，但我真的很困惑，想从了解这一点的人那里得到意见。

预加载图像可以通过 JavaScript 或 CSS（仅举两个我正在考虑的）来完成。我阅读了教程，如果浏览器再次找到相同的图像路径，它将呈现缓存的图像。

如果我预加载如下图像：

<img src="../images/bg.jpg" alt="background" width="1" height="1" style='display:none' />

和

<img src="images/bg.jpg" alt="background" />

与javascript类似：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

preload([
    '../img/imageName.jpg',
    'img/imageName.jpg' // case when using this script in a different hierarchical level)
]);

第二次调用会导致从缓存版本中渲染图像，否则它将无法工作，因为指定的图像path不同（尽管最终它引用的是同一个文件）。

提前致谢。

【问题讨论】：

浏览器会在检查其缓存之前确定文件的完整路径 - 您可以使用 Web Inspector 工具或 Firebug 进行测试。
你的意思是说浏览器总是使用完整的绝对路径来检查图片是否被缓存？
是的，没错 :) 有多种因素会影响浏览器是否应该加载缓存项目或直接获取它（ETags、过期标头等），因此浏览器会在查看之前先确定完整的绝对路径这些并选择做什么。
我想阅读这方面的内容并确定理解这个概念 - 您是否有一个链接可以记录此类内容？

标签： javascript css image preloading image-preloader

【解决方案1】：

我知道这是一个旧的，但我一直从实习生那里得到这个 - 所以这里......

即使 onload 函数在 JS 文件中要求/告诉浏览器查找图像；它是浏览器在寻找图像并告诉 JS 图像已加载。

所以你在 JS 中的图片路径应该和你在 HTML 中的输入路径是一样的。

PS：我注意到在您的 HTML 中，图像文件夹是“/images”，而在您的 JS 中，文件夹是“/img”

【讨论】：