4

Galera, estou com uma aplicação embarcada onde nosso processador não é lá dos melhores, o que acaba dando alguns problemas.

Digamos que eu precise exibir imagens de 10 a 10 segundos, na teoria, seria só fazer um contadorzinho ali e esperar pra trocar a imagem, porém, nosso hardware por ser limitado, ele leva mais de 1s para processar a imagem na tela.

Pensei então em fazer um preload. Como? Tendo 2 divs, sendo uma principal e outra que irá fica alterando sua propriedade visibility para visible e hidden. Enquanto uma ta exibindo, antes de dar 10s, que seria a troca da outra, aos 7s eu iria carregar a imagem para depois só mudar a visibilidade para ela aparecer.

Aqui está um exemplo: https://jsfiddle.net/f8fy7mdj/3/

Não sei se consegui ser claro, mas, alguém consegue sugerir uma opção melhor pra isso?

Edição: De acordo com o amigo que postou no comentário que a imagem só é exibida quando é realmente exibida (no caso, quando não estiver invisível), cheguei a uma possível ideia:

E se eu sempre exibir as imagens, só alterando entre o z-index delas, mas sem deixar que elas fiquem invisíveis, teoricamente, estaria sendo pintada na tela, porém, estaria escondida atrás da outra esperando a hora de exibir. Segue um exemplo: https://jsfiddle.net/kmnkhoxo/2/

Acho que desse modo, se fosse com imagem, ele sempre estaria processando ela né?

6
  • 1
    Teoricamente você está certo, mas creio que apenas trocar a imagem da div não causará processamento. Creio que o processamento só vai ocorrer quando a imagem for realmente exibida e o navegador tiver que redesenhar a página. Se for possível usar imagens com resolução menor costuma ajudar. Um navegador mais leve também ajuda.
    – Shura16
    Commented 20/11/2015 às 18:35
  • De acordo com o que tu falou: "o processamento só vai ocorrer quando a imagem for realmente exibida e o navegador tiver que redesenhar a página.", é possível afirmar, segundo meu exemplo, que o processamento de repintar a tela sempre acontece na div1 e na div2, somente acontece quando ela esta com o visibility em visible? Commented 20/11/2015 às 18:55
  • Sim, esse é o meu pensamento, mas posso estar errado. Existem o processamento de baixar a imagem e de desenhar na tela.
    – Shura16
    Commented 22/11/2015 às 12:02
  • Eu vou fazer testes baseados nisso, em relação a baixar imagens, todas elas são locais. Desde já, agradeço muito sua ajuda Commented 23/11/2015 às 11:18
  • No caso em particular, pelo que entendi, o problema principal, é o tamanho de suas imagens, em transições de imagens usamos sempre imagens de mesmo tamanho. E outra, ficaria muito feio uma imagem de determinado tamanho e logo em seguida outra de tamanho desproporcional. Se seu objetivo é trabalhar com Slides em seu site, tenho alguns exemplos para te passar, eles também trabalham com preloaders. Links: - github.com/woothemes/FlexSlider github.com/benschwarz/gallery-css highslide.com lokeshdhakar.com/projects/lightbox2 jqueryscript.net/slider/nivo-sli
    – user28366
    Commented 30/04/2016 às 21:55

1 Resposta 1

1

Uma forma para dar preload em imagens com javascript seria a seguinte forma abaixo, onde estou aproveitando parte do seu código:

var colors = [
    "http://www.robolaranja.com.br/wp-content/uploads/2014/10/Primeira-imagem-do-filme-de-Angry-Birds-%C3%A9-revelada-2.jpg",
    "http://imguol.com/c/noticias/2013/12/13/13dez2013---esta-imagem-mostra-a-nebulosa-de-caranguejo-um-iconico-remanescente-de-supernova-na-nossa-galaxia-vista-do-observatorio-espacial-herschel-e-do-telescopio-hubble-uma-nuvem-de-gas-e-poeira-1386961235961_956x500.jpg",
    "http://wallpaper.ultradownloads.com.br/121350_Papel-de-Parede-Imagem-Abstrata_1920x1200.jpg"
];

//preload
for (color in colors) {
    var img = new Image();
    img.src = colors[color];
}
1
  • Esse preload de imagem que você fez, serve unicamente para carregar as imagens e fazer com que o browser faça um "cache" delas, certo? No meu caso, isso não seria tanto o problema, acho que meu real problema esta sendo em como o browser processa essas imagens quando exibida na tela Commented 24/11/2015 às 17:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .