carregar imagem com javascript

[Eduardo Giullyanny 1]

Bom dia amigos;

 

tenho o seguinte codigo em javascript.:

<script type="text/javascript">
var a = document.getElementById('linkUrl');
var img = document.getElementById('imagem');
function mudarImagem(imagem, imagemG, classe){
	a.setAttribute('href', 'img/'+imagemG);
	img.setAttribute('src', 'img/'+imagem);
	img.setAttribute('class',classe);
}
//lightbox
$(function() {
       $('#produtos a').lightBox();
   });
</script>

 

e o seguinte HTML.:

<div id="produtos">
<a href="img/colchoesAmpliado.png" id="linkUrl"><img src="img/colchoes.png" id="imagem" width="1075" height="343" alt="" class="colchoes" /></a>
</div>

 

os links q chamam a função.:

<ul id="menuProdutos">
<li onclick="javascript:mudarImagem('colchoes.png','colchoesAmpliado.png')">Colchões</li>
   <li onclick="javascript:mudarImagem('escritorio.png','escritorioAmpliado.png')">Linha Escritório</li>
   <li onclick="javascript:mudarImagem('infantil.png','infantilAmpliado.png')">Linha Infantil</li>
   <li onclick="javascript:mudarImagem('estofados.png','estofadosAmpliado.png')">Estofados</li>
   <li onclick="javascript:mudarImagem('ropeiros.png','ropeirosAmpliado.png')">Ropeiros</li>
   <li onclick="javascript:mudarImagem('moveis.png','moveisAmpliado.png')">Móveis em Geral</li>
</ul>

 

a logica ai eh.: eu clico na opção no menu, e ai chama a função javascript passando parametros e a função seta os atributos no link e na imagem...

 

isso esta funcionando, mas estava fazendo uns teste e o usuario clica no link e ele num carrega nada, num tem como o cliente saber se esta vindo a imagem ou n... como eu posso fazer tipo assim.:

 

Quem quiser ver o site.: Clique aqui

e clicar nos menus verticais

[Eduardo Giullyanny 1]

olha eu novamente amigos;

 

tentei carregar as imagens assim.:

<script type="text/javascript">
//pre-carregar imagens
function carregarImagens (){
	imgColchoes = new Image();
	imgColchoes = "img/colchoes.png";
	imgColchoesApliado = new Image();
	imgColchoesApliado = "img/colchoesAmpliado.png";
	imgEscritorio = new Image();
	imgEscritorio = "img/escritorio.png";
	imgEscritorioAmpliado = new Image();
	imgEscritorioAmpliado = "img/escritorioAmpliado.png";
	imgInfantil = new Image();
	imgInfantil = "img/intantil.png";
	imgInfantilAmpliado = new Image();
	imgInfantilAmpliado = "img/infantilAmpliado.png";
	imgEstofados = new Image();
	imgEstofados = "img/estofados.png";
	imgEstofadosAmpliado = new Image();
	imgEstofadosAmpliado = "img/estofadosAmpliado.png";
	imgRopeiros = new Image();
	imgRopeirosAmpliado = new Image();
	imgRopeirosAmpliado = "img/ropeirosAmpliado.png";
	imgMoveis = new Image();
	imgMoveis = "img/moveis.png";
	imgMoveisAmpliado = new Image();
	imgMoveisAmpliado = "img/moveisAmpliado.png";
}
carregarImagens ();
var a = document.getElementById('linkUrl');
var img = document.getElementById('imagem');
function mudarImagem(imagem, imagemG, classe){
	a.setAttribute("href", "img/"+imagemG);
	img.setAttribute("src", "img/"+imagem);
	img.setAttribute("class",classe);
}
//lightbox
$(function() {
       $('#produtos a').lightBox();
   });
</script>

 

mas parece q o trem num fufou n

[Eduardo Giullyanny 1]

bom olha o que eu fiz agora.:

pesquisei sobre precarregar imagens, encontei o new Image(), num faz como a imagem q eu queri a, mas conseguir ganhar alguma velocidade

vejam lah e se alguem tiver alguma ajuda ainda eh bem vida

	//pre-carregar imagens
function carregarImagens (){
	imgColchoes = new Image();
	imgColchoes = "img/colchoes.png";
	imgColchoesApliado = new Image();
	imgColchoesApliado = "img/colchoesAmpliado.png";
	imgEscritorio = new Image();
	imgEscritorio = "img/escritorio.png";
	imgEscritorioAmpliado = new Image();
	imgEscritorioAmpliado = "img/escritorioAmpliado.png";
	imgInfantil = new Image();
	imgInfantil = "img/infantil.png";
	imgInfantilAmpliado = new Image();
	imgInfantilAmpliado = "img/infantilAmpliado.png";
	imgEstofados = new Image();
	imgEstofados = "img/estofados.png";
	imgEstofadosAmpliado = new Image();
	imgEstofadosAmpliado = "img/estofadosAmpliado.png";
	imgRopeiros = new Image();
	imgRopeirosAmpliado = new Image();
	imgRopeirosAmpliado = "img/ropeirosAmpliado.png";
	imgMoveis = new Image();
	imgMoveis = "img/moveis.png";
	imgMoveisAmpliado = new Image();
	imgMoveisAmpliado = "img/moveisAmpliado.png";
}
carregarImagens ();
var a = document.getElementById('linkUrl');
var img = document.getElementById('imagem');
function mudarImagem(imagem, imagemG, classe){
	if (imgMoveis == "img/"+imagem){
		a.setAttribute("href", imgMoveisAmpliado);
		img.setAttribute("src", imgMoveis);
		img.setAttribute("class",classe);
	}
	if (imgRopeiros == "img/"+imagem){
		a.setAttribute("href", imgRopeirosAmpliado);
		img.setAttribute("src", imgRopeiros);
		img.setAttribute("class",classe);
	}
	if (imgEstofados == "img/"+imagem){
		a.setAttribute("href", imgEstofadosAmpliado);
		img.setAttribute("src", imgEstofados);
		img.setAttribute("class",classe);
	}
	if (imgInfantil == "img/"+imagem){
		a.setAttribute("href", imgInfantilAmpliado);
		img.setAttribute("src", imgInfantil);
		img.setAttribute("class",classe);
	}
	if (imgEscritorio == "img/"+imagem){
		a.setAttribute("href", imgEscritorioAmpliado);
		img.setAttribute("src", imgEscritorio);
		img.setAttribute("class",classe);
	}
	if (imgColchoes == "img/"+imagem){
		a.setAttribute("href", imgColchoesApliado);
		img.setAttribute("src", imgColchoes);
		img.setAttribute("class",classe);
	}
}