预加载图像的相对路径

这可能是一个愚蠢的问题，但我真的很困惑，并且希望从知道这个内容的人那里得到意见。预加载图像的相对路径

预加载图像可以通过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) 
]);

将在第二调用结果到图像的渲染从T他缓存版本或它不会工作，因为指定的图像路径是不同的（尽管最终它指的是同一个文件）。

在此先感谢。

来源

2013-10-21 Mahendra Liya

浏览器将确定的完整路径文件检查其缓存之前 - 你可以使用Web Inspector工具或Firebug进行测试。 – Graham

你的意思是说浏览器总是使用完整的绝对路径来检查图像是否被缓存？ –

是的，这是正确的:)有各种因素影响浏览器是否应该加载缓存项目或直接获取它（ETags，过期头等），因此浏览器将首先确定完整的绝对路径，然后再查看这些内容并选择要执行的操作。 – Graham

我意识到这是老之一，但我得到这一个所有的时间从实习生 - 所以这里去...

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

所以你在JS中的图像路径应该和你在HTML中输入它的方式一样。

PS：我注意到你的HTML的图像文件夹是“/图片”，并在你的JS文件夹是“/ IMG”

来源

2017-04-04 00:29:55 moonunit7

回答

相关问题