JS + HTML Image Preload

Asked

Viewed 2,299 times

4

Guys, I have an embedded application where our processor is not the best, which ends up giving some problems.

Let’s say I need to display images of 10 to 10 seconds, in theory, it would only be to make a little count there and wait to change the image, however, our hardware for being limited, it takes more than 1s to process the image on the screen.

I then thought of making a Preload. How? Having 2 Divs, one being a main and the other that will stay changing your property visibility for Visible and Hidden. While one ta displaying, before giving 10s, that would be the exchange of the other, at 7s I would upload the image and then only change the visibility to appear.

Here is an example: https://jsfiddle.net/f8fy7mdj/3/

I don’t know if I could be clear, but someone can suggest a better option for this?

Editing: According to the friend who posted in the comment that the image is only displayed 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, would be being painted on the screen, but would be hidden behind the other waiting for the time to display. Follow an example: https://jsfiddle.net/kmnkhoxo/2/

I think that way, if it was with image, he would always be suing her right?

javascript html
  • 1

    Theoretically you’re right, but I think just changing the div’s image won’t cause processing. I believe that the processing will only occur when the image is actually displayed and the browser has to redesign the page. If it is possible to use images with a lower resolution it usually helps. A lighter browser also helps.

  • According to what you said: "processing will only occur when the image is actually displayed and the browser has to redesign the page." , it is possible to state, according to my example, that the processing of repainting the screen always happens in div1 and div2, only happens when it is with the visibility in Visible?

  • Yes, that’s my thinking, but I could be wrong. There is the processing of downloading the image and drawing on the screen.

  • I will do tests based on this, regarding downloading images, they are all local. I thank you very much for your help

  • In the particular case, as I understand it, the main problem is the size of your images, in image transitions we always use images of the same size. And another, it would look very ugly an image of a certain size and soon after another one of disproportionate size. If your goal is to work with Slides on your site, I have some examples to pass on to you, they also work with preloaders. Links: - https://github.com/woothemes/FlexSlider/ https://github.com/benschwarz/gallery-css http://highslide.com/ http://lokeshdhakar.com/projects/lightbox2/ http://www.jqueryscript.net/slider/nivo-sli

  • The images being of different sizes is no problem, because it was the person these images are uploads made by clients, IE, the most we can do is try to increase the image respecting the aspecte rate of it. I’ll take a look at these links

Show 1 more comment

1 answer

1


A way to promote images with javascript would be as follows below, where I am taking advantage of part 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];
}

  • This image file that you made, only serves to load the images and make the browser make a "cache" of them, right? In my case, this would not be so much the problem, I think my real problem is being in how the browser processes these images when displayed on the screen

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.