Question

Is it possible to pass the url attribute a dynamical query string? E.g url( ./SOME_IMAGE_GENERATOR?image=1 ); where image varies?

I need this attribute to be set via JS:

$( "#elem" )[ 0 ].style.background = "url( ./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1 )";

The link in the url points to a file, that generates and returns an image.
The image is generated correctly, but not applied as backround.

Clarification

The image I want to put inside does not exist yet. It is generated and returned by the page circuits.php and depends on the arguments.

The background is well changed, if the image exists. I have noticed that unlike changin the src attribute of the img tag, while the argument creates a request by the browser, sends and recieves headers and info, the background does not.

I’d thought about sending a request to the circuit.php generator, make him save the image on the server and then, with setTimeout, change the background, but I cannot rely on a certain time for the generation.

That is the problem. Now, do you guys have any ideas how to overtake this?

Answer 1

Working Example

I’ve replicated your scenario with a Jsfiddle and a image generating script held on my own website.

As you can see it is indeed possible to change the background dynamically with a generated image:
http://jsfiddle.net/DigitalBiscuits/Eh8yY/6/

Debugging your code

So….what’s wrong with yours?
Well firstly if you’re using Firefox or Chrome, use the developer tools to check what’s going on. Make sure no Javascript errors are showing up in the console.

Then I would suggest you check that your javascript is actually selecting the element, and that it is able to change the background (lets say to a static image). Isolate the code you that’s giving you problems and test it out in a new empty page, kinda like the JSfiddle I’ve linked you to above.

On a side note, your javascript code looks a bit foreign to me.

Instead of:

$( "#elem" )[ 0 ].style.background = ...

try using:

document.getElementById('myImg').style.background = ...

Lastly, ensure that you’re setting the correct headers in your php script that generates the images, and that no output is happening before the headers are set.