Carregar imagens

[Caya]

Olá.

Eu estou a desenvolver um slideshow em Javascript, onde tenho várias imagens que vão transitando entre elas.

Gostaria de saber como é que faço com que o slideshow só comece quando as imagens tiverem todas carregadas, fazer tipo um "loading".

Obrigado desde já,

Caya

[softklin]

Pesquisa no motor de busca por 'javascript image preload'. Apareceram-me desde scripts de poucas linhas a outros mais detalhados, de certeza que conseguirás encontrar um que sirva para as tuas necessidades 😉

Basicamente carregas as tuas imagens com javascript, criando objectos do do tipo Image.

[yoda]

Pesquisa no motor de busca por 'javascript image preload'. Apareceram-me desde scripts de poucas linhas a outros mais detalhados, de certeza que conseguirás encontrar um que sirva para as tuas necessidades 😉

Basicamente carregas as tuas imagens com javascript, criando objectos do do tipo Image.

Isso não é a melhor solução. Imagina que o slideshow tem 100 imagens, obrigaria o browser a só concluir o trabalho até as sacar todas.

O melhor a fazer é à medida que se vai navegando pela slideshow ir buscando por ajax as imagens (mais fácil de controlar).

Podes também optar por dar um determinado delay quando navegas pelas imagens, dando tempo ao browser para carregar a imagem (do género 2 segundos, que não mata ninguém).

[softklin]

É verdade, nem pensei para o caso de tantas imagens... E para além disso, ainda ia consumir largura de banda, e o utilizador só querer ver 2 ou 3 imagens.

Existia também para aí um script desses que escurecem o fundo e mostram a imagem, que basicamente ocupava esse tempo de carregamento de imagem com uma animação de redimensionamento, acho que também seria uma boa alternativa para o caso.

[Caya]

Pesquisa no motor de busca por 'javascript image preload'. Apareceram-me desde scripts de poucas linhas a outros mais detalhados, de certeza que conseguirás encontrar um que sirva para as tuas necessidades 😉

Basicamente carregas as tuas imagens com javascript, criando objectos do do tipo Image.

Eu já andei a fazer isso antes de postar aqui, mas só consegui fazer o "loading" com uma imagem. Quando tento com várias imagens não funciona =\

Isso não é a melhor solução. Imagina que o slideshow tem 100 imagens, obrigaria o browser a só concluir o trabalho até as sacar todas.

O melhor a fazer é à medida que se vai navegando pela slideshow ir buscando por ajax as imagens (mais fácil de controlar).

O problema é que o user pode saltar logo para outra imagem (1ª para a 4ª, da 5ª para a 3ª, ...) e assim não dá tempo para as imagens carregarem. Por isso o ideial mesmo, era conseguir carrega-las todas antes de permitir ao user usar o slideshow.

Podes também optar por dar um determinado delay quando navegas pelas imagens, dando tempo ao browser para carregar a imagem (do género 2 segundos, que não mata ninguém).

Isso é muito relativo. Vai depender muito do tamanho das imagens e da velocidade de download da internet do cliente.

ty

[yoda]

O problema é que o user pode saltar logo para outra imagem (1ª para a 4ª, da 5ª para a 3ª, ...) e assim não dá tempo para as imagens carregarem. Por isso o ideial mesmo, era conseguir carrega-las todas antes de permitir ao user usar o slideshow.

Não vejo como. Se for bem feito, não tens problemas nenhuns. Se quiseres, faz um diagrama do que pretendes visualmente e do funcionamento, que eu deixo aqui um código para isso.

[Caya]

http://img687.imageshack.us/img687/558/semttulo2mz.png

Cada imagem tem uma palavra correspondente, e se o rato não tiver em cima do slideshow, ele muda de imagem de 5 em 5 segundos. O user ao colocar o rato sobre uma palavra há um fade entre a imagem actual e a correspondente a palavra.

[yoda]

Não vejo pelo exemplo onde está o problema de saltar da 1ª para a 4ª imagem.

Agora, isso pode ser complicado ou simples. As imagens têm algum efeito de transição?

[Caya]

http://img246.imageshack.us/img246/4508/semttulo2p.png

http://img696.imageshack.us/img696/8162/semttulo3.png

http://img134.imageshack.us/img134/1302/semttulo4x.png

Antes de essa transição começar, já devo ter a imagem carregada, por isso é que quero que estejam todas carregadas antes de começar. Experimentei com imagens de 500kB alojadas no meu servidor remoto e o script confundisse todo se a imagem não estivesse já carregada.  🙂

[yoda]

Não percebi a transição.

[Caya]

Há um fade entre as imagens... Enquanto uma vai perdendo opacidade a outra vai ganhando. Mas o importante aqui não é a transição, mesmo que não houvesse transição haveria o mesmo problema pois o script ao passar para a outra imagem não a tinha carregada.

Só preciso de saber se há alguma função que "diga" quando a página está toda carregada, ou então como pre-carrego várias imagens.

[yoda]

Esse fade não sei se é possível. Ou melhor, possível é, mas implica manhas que puxam um bocado mais pelo browser.

A transição que queres, por exemplo, sem ser com as imagens já carregadas, demora mais tempo a fazer a transição (para garantir que só a faz com a imagem carregada, mas é possível).

Se quiseres usar um preloader, tens um aqui :

http://flesler.blogspot.com/2008/01/jquerypreload.html

Nunca o usei, mas geralmente tudo o que é feito em jQuery funciona bem.

Experimenta, se correr mal apita 🙂

[Caya]

Tanto é possível como eu já fiz  🙂

Mas o problema não é a transição, isso já está feito tal como o resto das funções todas do slideshow.

yoda.pt obrigado, era exactamente isso que eu queria. Mas neste trabalho não posso usar nenhuma biblioteca javascript, por isso precisava de um script que fizesse isso.

[yoda]

Nesse caso, o que tens a fazer é o seguinte :

1. apanhar o evento onload do body (ou algo parecido que te diga quando é que o restante site foi carregado);

2. chamar um procedimento / função nessa altura;

3. escrever esse procedimento / função de modo a que mal o site seja carregado, ele carregue as imagens (tipo isto : http://www.roscripts.com/Javascript_image_preloader-111.html )

4. usar um gif loader no lugar do slideshow (que só é substituido pelo conteúdo do slideshow quando a função que chamas para carregar as imagens acaba o seu trabalho)

Em último caso, podes criar uma div oculta no markup, que tem as tags <img> com todas as imagens que queres, e usar o javacript para só te deixar usar os links de navegação quando o site estiver carregado.

jQuery resolvia isso facilmente, mas se não pode ser ...