Image Preload JS + HTML

Question

Image Preload JS + HTML

Navigation

#1 by (1 votes)

4

Well, I have an embedded application where our processor is not the best, which gives some problems.

Let's say I need to display images for 10 to 10 seconds, in theory, it would just make a little counter there and wait to change the image, however, because our hardware is limited, it takes more than 1s to process the image on the screen .

I then thought about doing a preload. As? Having 2 divs, being one main and one that will keep changing your visibility property to visible and hidden. While one ta displaying, before giving 10s, that would be the exchange of the other, at 7s I would load the image and then only change the visibility for it to appear.

Here's an example: link

I do not know if I can be clear, but can anyone suggest a better option for this?

Editing: According to the friend who posted in the comment that the image only appears when it is actually displayed (in this case, when it is not invisible), I came up with a possible idea:

>

And if I always display the images, only changing between the z-index of them, but without letting them be invisible, theoretically, it would be being painted on the screen, however, it would be hidden behind the other waiting for the time to display. Here's an example: link

I think that way, if it were an image, it would always be processing it right?

javascript html

asked by anonymous 20.11.2015 / 19:15

1 answer

How to call modal window with parameter in bootstrap? Search for the title of the option using selec2

score 1 · Accepted Answer

One way to preload images with javascript would be as below, where I'm taking advantage of some of your code:

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];
}