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.

The browser will determine the full path to the file before checking its cache - you can test this out using the Web Inspector tools or Firebug. — Graham, Oct 21 '13 at 17:34
Do you mean to say the browser always uses the full absolute path to check if the image is cached or not? — Mahendra Liya, Oct 21 '13 at 17:35
yes that's right :) There are various factors influencing whether the browser should load a cached item or fetch it directly (ETags, expires headers etc) so browser will determine the full, absolute path first before looking at these and choosing what to do. — Graham, Oct 21 '13 at 17:38
I would like to read about this and understand the concept for sure - do you have a link where something like this would be documented? — Mahendra Liya, Oct 21 '13 at 17:41

moonunit7 · Answer 1 · 2017-04-04T01:20:45.043

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"

Relative path in preloading images

1 Answers1