1

When you set a background image (you could possibly include using an img tag as well - I haven't tested that though) in Google Chrome and the server isn't asking for it to be cached, Google Chrome will hit the server asking for the image again (even if it's already in the page - I had filed this as a bug, but it was set as wontfix). Is there a way that I could circumvent this (preferably using jQuery)?

I have loaded the image into a javascript Image object (as the plan is to place it on canvas) so I thought I could do something with that (but Set an Image object as a div background image using javascript states otherwise).

Setting the server to ask the browser to cache the file isn't ideal as it is dynamically generated (I know about the ?_rand=123 trick, but would prefer a pure client side solution).

Community
  • 1
  • 1
Brian Barnes
  • 1,009
  • 7
  • 15
  • 1
    So client behaves according to the requirements. Why is it an issue? Use proper caching headers and everything will be fine – zerkms Apr 16 '12 at 00:03
  • The only way a browser can avoid fetching an image when its URL is requested is to cache it. If you tell the browser not to do so, it won't. That the requests for it come from the same page make no difference; there's no HTTP cache control concept for "don't cache for the same page", in other words. – Pointy Apr 16 '12 at 00:06
  • I can understand the reason why the Chrome team choose not to fix it, but I would rather if the image changed server side (as it is entirely possible for it to do in my application, as it is dynamically created sprite sheet) that it is not reflected until the whole page is refreshed on the client side (or preferably under my control). – Brian Barnes Apr 16 '12 at 02:41

2 Answers2

0

Swap one object for another.

If you are saying that a precached image won't solve this issue for you (hard for us to know without seeing your actual page and server), then your only other potential solution is to precache an object with the actual image as its background image and then swap out your current object for the one that already has the background loaded. If you disclose your actual HTML that you're trying to change the background image on, we could advise more specifically how to to that.

But, this is only a work-around as the more proper way of solving this is to enable the client to cache with the proper headers from the server when you want caching. You can then bust caching at any time by appending something to the URL when you don't want the cache, but if you instruct the browser not to cache via the headers, then it will listen to you and you can't work-around that.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Unfortunately that wont work for me as a user could place many copies on the stage (hence this application is moving towards using HTML5 canvas). It could work for the "snap to grid" cursor I'm using though. – Brian Barnes Apr 16 '12 at 03:23
0

Create a CSS class for each image that sets the with the background-image property, then set the className of an element to the class corresponding to the image you want to display.

See this technique in action on JSBin: http://jsbin.com/oruros/1. Open up the network panel in Chrome and take a look -- no image is requested more than once.

If you want to do this dynamically, use one of the techniques outlined here to create the CSS classes: How to create a <style> tag with Javascript

Community
  • 1
  • 1
lazd
  • 4,468
  • 3
  • 23
  • 17