El ejemplo me parece un poco rebuscado, tendrías que hacerlo asi para lograr una background
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript"> //<![CDATA[
/* script */
var ImagenPrueva = new Image();
ImagenPrueva.src = "mapa.jpg";
ImagenPrueva.onload = function(){
document.getElementById('capa').style.backgroundImage = "url("+this.src+")";
}
//]]>
<div style="width: 400px;height:339px;" id="capa">
Si la intención es cambiar la imagen de fondo, usar la ruta y no crear un nuevo objeto imagen
Con respecto a la caché no tenés que hacer nada desde el javascript, si querés optimizar el rendimiento tenes que pasar un header para fijar un tiempo de expiración largo (a no ser que explicitamente quieras lo contrario), lo recomendable es hacerlo desde el server, por ejemplo en apache
1año
Código Apache:
Ver original<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf|woff|eot|svg|ttf|flv|swf)$">
Header set Cache-Control "public, max-age=29030400"
</FilesMatch>
todos los elementos se guardan en la cache del navegador, la diferencia está en si el navegador va a leer el archivo desde ahi ó va a buscar una copia "fresca" en el servidor
Saludos