Relative path in preloading images

Question

This may be a dumb question, but I've a real confusion and want to get an opinion from somebody who knows this in-out.

Preloading images can be done either via JavaScript or CSS (to name two which I'm considering). I read the tutorials that if the browser finds the same image path again, it would render the cached image.

If I preload images like:

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

and

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

Similar with 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)
]);

Will the second call result into rendering of the image from the cached version or it will not work because the image path specified is different (though ultimately it refers to the same file).

Thanks in advance.

Answer 1

I realise this is and old one but I get this one all the time from interns - so here goes...

Even though the onload function is in the JS file asking/telling the browser to look for the image; it is the browser looking for the image and is telling the JS that the image/s loaded.

So your image path in the JS should be the same as how you would enter it in the HTML.

PS: I noticed in your HTML the image folder is "/images" and in your JS the folder is "/img"