Loading para carregar imagem

[Weikm@n 0]

Olá a todos, estou desenvolvendo uma galeria, postei ate uma duvida aki no forum, estou aguardando a ajuda de vcs,deem uma olhada, pois bem, preciso q qnd eu clicar em uma miniatura, ela mostre uma imagem de carregando e apos carregar totalmente a imagem, ela exiba a imagem, jah vi em varios sites, tutoriais de como fazer cm paginas, tentei ate bota a imagem dentro de uma pagina externa, mas nao deu mto certo. nao precisa funcionar dentro do carousel no meu outro post, soh a logica mesmo, ai eu adapto pro meu script.

soh precisa fazer o seguinte

 

qnd eu clicar em uma imagem pequena, ela mostre uma imagem de carregando, e assim q a imagem grande q eu quero q seja exibida esteje totalmente carregada, suma cm o loadin e mostre a imagem, eh um efeito mto simples, mas tw batendo cabeca pra conseguir,espero q tenhao entendido.

[William Bruno 1501]

veja sobre o evento .onload dos objetos.

 

no clique da miniatura, dispare um pre load da tua imagem, assim que esse resorce disparar o evento .onload, você poderá remover o gif. E então mostrar a imagem completa carregada.

[Weikm@n 0]

veja sobre o evento .onload dos objetos.

 

no clique da miniatura, dispare um pre load da tua imagem, assim que esse resorce disparar o evento .onload, você poderá remover o gif. E então mostrar a imagem completa carregada.

podes postar um exemplo? sw novo ainda cm java, tenho pouco conhecimento, mas estou me dedicando, podes postar um exemplo?

 

Opah, axei esse codigo, ai eh soh definir a variavel bgImagem e botar o caminho completo da imagem de carregando.

<script type="text/javascript">

var bgColor = "#ddddf0";
var bgImage = "imgs/layout/foto/ajax-loader.gif";
var bgRepeat = "no-repeat";
var bgPosition = "center center";
var borderWidth = "0px";
var borderStyle = "solid";
var borderColor = "#ddddf0";

var loadImage = function(w, h, url, target) {
var img = new Image(w, h);
img.src = url;
img.style.visibility = "hidden";
var molde = document.createElement("div");
molde.setAttribute("id", "molde");
var style = molde.style;
style.border = borderWidth+" "+borderStyle+" "+borderColor;
style.background = bgColor+" url("+bgImage+") "+bgRepeat+" "+bgPosition;
style.width = img.width+"px";
style.height = img.height+"px";
document.getElementById(target).appendChild(molde);
molde.appendChild(img);
img.onload = function() {
this.style.visibility = "visible";
molde.style.background = bgColor;
}
}
</script>

ai pra exibir a imagem eh soh botar esse script

<script type="text/javascript">
var imagem = new loadImage(800, 600, "http://wallpapermydesktop.com/upload/gold/cache/BR-olwp2-1024x768.jpg", "divimg");
</script>

ai ele vai criar a imagem dentro da div q tah cm o id divimg

 

tah funcionando legal, mas axei o codigo mto grande, o q vcs axam?

 

queria tirar esses estilos e aplicar como css, ainda tw dando uma analizada pra compreender o script todo, mas como sou novo, nao sw mto bom em entender o script todo, aguardo ajuda