预加载图像的相对路径

时间:2013-10-21 17:31:53

标签: javascript css image preloading image-preloader

这可能是一个愚蠢的问题,但我真的很困惑,并希望得到一个知道此事的人的意见。

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

第二次调用是否会导致从缓存版本渲染图像,或者它将无法工作,因为指定的图像路径不同(尽管最终它指的是同一个文件)。

提前致谢。

1 个答案:

答案 0 :(得分:0)

我意识到这是旧的,但我从实习生那里一直得到这个 - 所以这里有...

即使onload函数在JS文件中询问/告诉浏览器查找图像;它是寻找图像的浏览器,并告诉JS加载了图像。

因此,您在JS中的图像路径应该与在HTML中输入它的方式相同。

PS:我注意到你的HTML中的图像文件夹是&#34; / images&#34;在你的JS中,文件夹是&#34; / img&#34;

相关问题