1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

[javascript] Imagem de loading em galeria

Discussão em 'Web Development' iniciada por diutsu, 4 de Maio de 2009. (Respostas: 12; Visualizações: 2538)

  1. diutsu

    diutsu [email protected] Member

    Estou a fazer uma galeria de imagens, já tenho tudo feito, as thumbnails, a imagem ampliada e as legendas, no mouseover (tudo 100% CSS), a galeria está integrada numa página com texto, e quando se passa o rato por cima da imagem, aparece um div por cima o texto com a imagem, com isto está tudo ok.
    O que eu queria era:
    - as imagens só carregassem no mouseover; (isto também consigo)
    - enquanto as imagens estiverem a carregar seja mostrada uma mensagem, no local onde vai ficar a imagem, a dizer que a imagem está a carregar.
    - as imagens só apareçam quando estiverem 100% carregadas.

    O HTML que eu estou a usar para cada imagem é o seguinte:
    Código:
    div class="thumb"><img src="images/thumbnails/002.jpg" alt="imagem da galeria" onmouseover="mudaImagem(2);")/><div id="img2"><p>Legenda</p></div></div> 
    A função mudaImagem, é esta:
    Código:
    function mudaImagem(n) {
    var a = n.toString();
    var img = "img"+a;
    if(a.length == 1) {a = '00'+a;}
    if(a.length == 2) {a = '0'+a;}
    var path="images/fotos/"+a+".jpg";
    html = "<img src="+path+" />";
    document.getElementById(img).innerHTML = html;}
    }
    Como eu disse como é que ponho a mensagem a dizer que está a imagem está a carregar, já estou farto de procurar na net e não consigo encontrar uma maneira que funcione.
     
    Última edição: 4 de Maio de 2009
  2. unsilent

    unsilent Power Member

    Boas, experimenta dar uma olhadela ao código do lightbox.

    Isto é um script muito simples que foi postado aqui.
    Código:
    <script language='javascript' type='text/javascript'>
    function popUp(URL) {
    [COLOR="SeaGreen"]this.URL=URL;
    var newImg = new Image();
    newImg.src = URL;
    if (newImg.complete) [/COLOR]{
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "','toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=1,width="+newImg.width+",height="+newImg.height+",left = 0,top = 0');");
    
    }
    [COLOR="SeaGreen"]else {
    setTimeout('popUp(URL)', 1000);[/COLOR]
    }
    }
    </script>
    a função era chamada através de algo tipo
    O que te interessa essencialmente é a parte que está a verde.
    Vê isto:image object,
    espero que ajude
     
  3. diutsu

    diutsu [email protected] Member

    Obrigado, assim já funciona... até uma parte.

    Ele de facto carrega a imagem, e de facto mostra a mensagem de estar a carregar, mas só mostra a imagem grande quando eu tiro o rato da thumb (deixando de ver o div da img grande), e volto a por o rato na thumb.
    Ou seja não actualiza a imagem automaticamente, só quando volto a fazer o mouseover.
     
  4. unsilent

    unsilent Power Member

    Posta ai o script completo como o tens agora.
     
  5. diutsu

    diutsu [email protected] Member

    Código:
     function mudaImagem(n) {
    var a = n.toString();
    var img = "img"+a;
    document.getElementById(img).innerHTML = '<img src="images/loading.gif"/>';
    if(a.length == 1) {a = '00'+a;}
    if(a.length == 2) {a = '0'+a;}
    var path="images/fotos/"+a+".jpg";
    var html = "<img src="+path+" />";
    var newImg = new Image();
    newImg.src = path;
    if (newImg.complete) {
    document.getElementById(img).innerHTML = html;}
    else {
    setTimeout('mudaImagem(n)', 100);
    }
    }
    aqui está

    reparei agora que se fizer F5, ele carrega a imagem e mostra-a ao mesmo tempo da 1º vez que faço mouseover.
    se fizer CTRL+F5, fica a mostrar a imagem de loading e não faz mais nada.

    EDIT: Um pequeno update, para que as imagens possam ter legendas

    Código:
    function mudaImagem(n) {
    var a = n.toString();
    var img = "img"+a;
    var legenda = document.getElementById(img).title;
    document.getElementById(img).innerHTML = '<img src="images/loading.gif"/>'+legenda;
    if(a.length == 1) {a = '00'+a;}
    if(a.length == 2) {a = '0'+a;}
    var path="images/fotos/"+a+".jpg";
    var html = "<img src="+path+" />";
    var newImg = new Image();
    newImg.src = path;
    if (newImg.complete) {
    document.getElementById(img).innerHTML = html+legenda;}
    else {
    setTimeout('mudaImagem(n)', 100);
    }
    }
    , basta definir o conteúdo da legenda com toda a marcação html, necessária, <p> incluído no atributo title do div
     
    Última edição: 5 de Maio de 2009
  6. unsilent

    unsilent Power Member

    Eu lembro-me que a razão pela qual tinha posto this.URL=URL, era para que a função não fizesse "reset":
    Durante bastante tempo deu-me sistematicamente erro de "too much recursion" na parte do else{setimout(..., ainda andei uns 2 dias à volta daquilo...só depois percebi que eu estava a recomeçar o processo de carregar a imagem a cada timeout.

    Instala a webdeveloper toolbar p/ o firefox e vê se não te está a dar um erro semelhante.

    Se o que escrevi está confuso, não ligues...:) já tou com um sono que nem consigo olhar p/ ecran:zzz:
    Amanhã tento olhar p/ isso melhor
    cumps
     
  7. diutsu

    diutsu [email protected] Member

    Ok, eu também estava a pensar se não seria por cada vez que se executa a função ela não estaria a recarregar a imagem outra vez.
    Agora quanto ao this eu é que ainda não entendi muito bem isso, mas amanha vejo.

    Edit: coloquei essa barra, e o erro que dá é "n not defined", o que não sei o que significa (no contexto)
     
    Última edição: 5 de Maio de 2009
  8. p3dro

    p3dro Power Member


    Tenta alterar esta linha
    Código:
    setTimeout('mudaImagem(n)', 100);
    para isto
    Código:
    setTimeout('mudaImagem(' + n + ')', 100);
    ou isto
    Código:
    setTimeout(function(){mudaImagem(n);}, 100);
     
  9. diutsu

    diutsu [email protected] Member

    p3dro, tu és deus, com qualquer uma das alterações o script funciona como eu queria, e sem erros na página, segundo a dita "web developer toolbar", a qual eu não conhecia, mas tem bastantes funções interessantes.

    Fica só por resolver um pequeno bug: quando eu faço F5 (refresh), as imagens carregam e são mostradas ao mesmo tempo, ou seja o script não funciona quando se faz F5, (mas funciona com CTRL+F5).

    De qualquer maneira muito obrigado pela ajuda.
     
  10. p3dro

    p3dro Power Member

    :lol: :x2:

    Obrigado, mas aquilo que apontei era de simples resolução :p se estás a começar em javascript esses erros são normais.

    O ctrl+F5 faz um full-refresh à página, "ignorando" assim o que tiveres em cache.
     
  11. diutsu

    diutsu [email protected] Member

    O código fica então assim
    Código:
    function mudaImagem(n) {
    var a = n.toString();
    var img = "img"+a;
    var legenda = document.getElementById(img).title;
    document.getElementById(img).innerHTML = '<img src="images/loading.gif"/>'+legenda;
    if(a.length == 1) {a = '00'+a;}
    if(a.length == 2) {a = '0'+a;}
    var path="images/fotos/"+a+".jpg";
    var html = "<img src="+path+" />";
    var newImg = new Image();
    newImg.src = path;
    if (newImg.complete) {
    document.getElementById(img).innerHTML = html+legenda;}
    else {
    setTimeout('mudaImagem(' + n + ')', 100);
    }
    } 
    Estive a pensar, e cheguei à conclusão que este código está de uma pequena evolução
    Como as imagens têm obrigatoriamente de ter um nome do tipo: 001.jpg, 002.jpg, e estar numa pasta fixa, este é um aspecto limitador do código.
    Eu ia propor que se lesse o atributo src da imagem original e se usasse este atributo para escolher a imagem, mas isto não ia resultar, porque implicava duas coisas:
    - a imagem carregada era a mesma da thumbnail, o que seria tiraria toda a utilidade ao código.
    - mesmo que se alterasse o caminho da imagem, a imagem estar numa pasta fixa à mesma.
    - por fim a imagem teria de ter algum tipo e numeração.
    Ou seja é melhor deixar isto.

    Outro método seria usar um link para a imagem grande que contivesse a imagem pequena, e que o link funcionasse com o mouseover para mostrar a imagem grande, mas se se clicasse no link estariam a abrir a imagem grande numa nova página.
    Sei que é possivel evitar esta situação, devido a galerias que já tenho visto, mas não faço a minima ideia de como o fazer, e também não é fundamental para o que eu pretendo, porque eu não tenciono usar links.

    De qualquer maneira gostava de saber, não eu necessitar, como é que eu posso "ler" o atributo do elemento que executa a função

    para facilitar as coisas, como é que posso saber qual o valor do atributo alt desta imagem
    Código:
     <img scr="perdida/no/espaço1.jpg" onmouseover="mudaImagem(1)" alt="ajudem-me a encontrar o caminho de volta" /> 
    EDIT: thnx to google já descobri com ler o atributo "alt", ou outro qq
     
    Última edição: 6 de Maio de 2009
  12. OldMan

    OldMan Power Member

    tip: www.jquery.com
     
  13. unsilent

    unsilent Power Member

    :x2:
    Tens toda a razão, dada a simplicidade do bicho quase que qualquer dúvida de javascript pode( e deve) ser respondida com esse link:D.
     

Partilhar esta Página