0

I have been thinking about this for quite some time and thought I should ask the question here .

Let us take the case of a spinner . A spinner can be shown using javascript and CSS3 . However we can just simply load a spinner.gif using javascript and be done with it . To me it looks like, in a distributed code (Java EE Application), the image will have to be retrieved from the server every time and hence it will be more costly . Is my assumption correct ? Are there any more posts which experts know of here that has already compared these 2 processes ?

Arjan Tijms
  • 37,782
  • 12
  • 108
  • 140
The Dark Knight
  • 5,455
  • 11
  • 54
  • 95
  • 1
    I am no expert, just out of curiosity why is it worrying that "the image will have to be retrieved from the server..?" isn't proper caching an answer to that ? – Raja Khoury Apr 13 '15 at 06:41
  • 1
    It is not JS that is “loading” the image – it at most creates an Image object or does something else that _triggers_ the request. And whether or not the same image URL gets requested again or is taken from cache, depends mostly on what caching instructions the server sends. – CBroe Apr 13 '15 at 06:42
  • it might be enterprise grade to just "load" the image. You should create a proper `ImageLoaderInterface` and perhaps even an abstract factory service provider to show an image to a user. – Ryan Apr 13 '15 at 06:43

1 Answers1

2

Images are cached by the browser (both disk cache and memory cache) and the cache is used whether the image is loaded via HTML present in the page, .innerHTML set by a script, .src set by script or a new image object created by script. In all cases, the browser uses the cache unless the client has caching turned off or the server has instructed the browser not to cache a particular resource. So, if the image is already in the cache, it will be available immediately when set by script. When an image is found in the cache, it is not loaded from the server, it is loaded directly from the local cache.

Images set by script are loaded asynchronously in the background.

If you are worried about the very first time the image is accessed (or any time it ages out of the cache), yes it will have to be loaded from the server. If that short delay while the image is loaded causes a performance issue or delay, then the image can be pre-cached by loading it before it is needed, thus causing it to be cached by the browser so it will be available immediately later on.

You can relieve load on your server by making sure that you have optimal header settings on image retrievals to allow as much image caching by the browser as feasible. You can read what Google has to say about HTTP caching here and here's A Beginner's Guide to HTTP Cache Headers.

FYI, here are some references for how to manually preload images (into the cache):

Image preloader javascript that supports events

Is it possible to insert images in cache before rendering

Is there a way to load images to user's cache asynchronously?

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • This is brilliant . Just the sort of explanation I was looking for. Thank you . – The Dark Knight Apr 13 '15 at 06:49
  • @TheDarkKnight - I added several references to posts that contain code for preloading images into the cache. – jfriend00 Apr 13 '15 at 06:52
  • @jfriend00 I was monitoring last day the caching performance of my site ( gallery based ), I noticed in firebug / chrome that sometimes the cache = MISS .. so I am wondering why isn't the browser always using the cached images... Where should I look into ? knowing that the cache was not cleared and images are cached in the browser, but at each http request some do not load from the cache.. is this normal? – Raja Khoury Apr 13 '15 at 06:52
  • @AwRak - you'd have to first start with what the cache settings are from the server for the images to see how long they are allowed to be cached. There are many settings that can influence how long something can be cached - after doing some investigation on the image settings in your particular case, you may want to post a new question asking for a specific type of help understanding what you have. – jfriend00 Apr 13 '15 at 06:57
  • Sure, will do once I look into it deeper.. Thanks – Raja Khoury Apr 13 '15 at 06:58