2

I already have a loaded image in the DOM referenced by the variable img.

I want to set the background image of an element to the loaded image in the DOM.

if i simply do "background-image:url('"+img.src+"')" problem is this relies on whether the image is cached by the browser (for user agents that explicitly do not store cache, or cache max size 0, basically, screwed)

If the image is not cached by the browser, a new image would be requested (which obviously is what I'm trying to prevent since the image is already in the dom re-requesting it is just unnecessary)

how do we set the background image of an element with an already loaded image in the DOM?

Simple test script to prove that the image would be re-requested, (use a browser which you can clear the cache on to test) http://qweop.com/test/cache.php:

<!doctype html><html>
<head></head>
<body onload="load();" >
Step 0. Open your network inspector.<br>
Step 1. Wait for image to finish loading.<br>
Step 2. Clear your browser's cache (do not refresh this page);<br>
<button disabled="disabled" id="button" onclick="
    document.getElementById('div').style.backgroundImage='url('+document.getElementById('img').src+')';
">Step 3. After Cache is cleared, click</button>
<br>
<img id="img" width="500" height="500"  src="http://upload.wikimedia.org/wikipedia/commons/archive/4/4e/20090223155149!Pleiades_large.jpg" onload="
    document.getElementById('button').disabled='';"
/>
<div id="div" style="display:inline-block;width:500px;height:500px;background-color:yellow;"></div>
</body>
</html>
Pacerier
  • 86,231
  • 106
  • 366
  • 634
  • What happened when you tried it? Surely even if a particular browser doesn't cache images in the sense of keeping them for potential future uses it would still have your image ready to go for the current page? – nnnnnn Aug 01 '11 at 00:04
  • @nnnnnn surely if the browser doesn't cache the image, there is no way it can have the image ready to go for the current page. it needs to consult the cache. see test script (in edited question) and try it for yourself. – Pacerier Aug 01 '11 at 02:01

2 Answers2

3

You can download the image as a base64 string for the .src of your img instance. Copying the img.src to background-image:url will copy this data-string of the image instead of checking the cache or downloading it. For example:

<img src = "data:image/gif;base64, SOMEBASE64STRING" />

You can get a base64 version of your image here, generate it with PHP like here, or work with the canvas element to generate the base64 string from an image as explained here.

Community
  • 1
  • 1
Remi
  • 20,619
  • 8
  • 57
  • 41
  • i'll accept this as answer if there is no better solution. Since js doesn't have native byte value types, the memory required to work with 40k characters of string data per image is not exactly appealing. not to mention that if the base64 is not pre-generated, at some situations the delay of hot converting base64 strings from an image using the canvas may be humanly-noticeable. – Pacerier Aug 01 '11 at 01:35
  • completely agree with you... Best would be if it would be possible to obtain the binary data directly from a new Image() object that you can create/load once and reuse while the page remains 'uncached'. But I believe that is not possible. – Remi Aug 01 '11 at 02:24
0

Have you considered loading the image with CSS in the first place?

edit

I think you won't be able to bypass this in a "clean" way. Think like we're going to do a web browser. You make a request, store the image somwhere and use it. What's on the scren is just a rendered version of the file you stored. Once you clear the cache, the browser has to request it again unless it store it somewherelse, like a tmp folder or something (where the user can't delete).

But i guess this isn't a big issue since it's not usual for users to clear the cache on the fly.

Hugo Mota
  • 11,200
  • 9
  • 42
  • 60
  • what do you mean by *loading the image with CSS*? – Pacerier Aug 01 '11 at 05:37
  • not using . so, both images will come from CSS markup. I don't know if it'll work, it's just a shot :p – Hugo Mota Aug 01 '11 at 16:02
  • yes but still.. when we delete the cache the image is gone, unless we store it in memory. however by default no browsers that i have came across before actually stores images in memory. so when we clear the cache we can't get the image without re-requesting it again. – Pacerier Aug 01 '11 at 16:38