Preload image with Javascript and CSS

Question

I have a big problem with images in javascript embedded aplications. I want make a preload image but I don't know how the browser works.

See this simple example: 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"
]

var currentDiv = "div2";
var count = 0;
var lenght = colors.length;
var timeForNextImage = 0;
var preloadOk = false;

setInterval(function() {

    count ++;
    if (count > lenght) count = 0;

   var date = new Date();
   var time = date.getTime();

    if  (time > (timeForNextImage - 3000) && preloadOk == false) {
        preLoad();
    } else if (time > timeForNextImage) {
        play();   
    }



}, 300);

var play = function() {

    if (currentDiv == "div2") {
        $('#'+currentDiv).css("visibility", "visible");
    } else {
        $('#div2').css("visibility", "hidden");
    }
    var date = new Date();
    timeForNextImage =  date.getTime() + 10000;
    preloadOk = false;

    $("#lbl").text("div atual: "+currentDiv);
 };

var preLoad = function() {  

      if (currentDiv == "div1") {
        currentDiv = "div2";      
    } else {
        currentDiv = "div1";
    }

     $("#" + currentDiv).css("background-image", 'url('+colors[count]+')');
    preloadOk = true;
};

How you can look, I do a preload, in theory.. but, the browser only processes my image when I put it in the stage ?

What if I change the z-index attribute, it renders again?

Are you trying to achieve image rotation in every 3 seconds? — Rajdeep Paul
– Rajdeep Paul, Commented Nov 24, 2015 at 13:11
css("visibility", "hidden") => new browser lazy load css hidden element; so a div with background image implicit height: 0px; is usually better if you don't use JS — Blag
– Blag, Commented Nov 24, 2015 at 13:18

Marcos Pérez Gude · Accepted Answer · 2015-11-24 13:10:03Z

2

You return preloadOK = true but the image doesn't load. That's not a preloader.

To make a preloader you can play with new Image() object or with load() event.

var images = new Array()
function preload() {
  for (i = 0; i < preload.arguments.length; i++) {
    images[i] = new Image()
    images[i].src = preload.arguments[i]
  }
}
preload(
  "http://domain.tld/gallery/image-001.jpg",
  "http://domain.tld/gallery/image-002.jpg",
  "http://domain.tld/gallery/image-003.jpg"
)

3 Ways to Preload Images with CSS, JavaScript, or Ajax

answered Nov 24, 2015 at 13:10

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paulo Gustavo Over a year ago

Ok, but, how the browser works ? It is processes the image when we put in the stage?

Paulo Gustavo Over a year ago

I will try this strategy with javascript load, thanks!

Marcos Pérez Gude Over a year ago

When you put the background image, the url is updated but you return true next line. To control asynchronous loaders as ajax or images, you need a deferred to wait to load some asynchronous resource. Otherwise, with that methods you can achieve the same without a deferred. But if you feel interesting in what is and how it works the deferred, take a look: api.jquery.com/category/deferred-object

Shreyas · Accepted Answer · 2015-11-24 13:11:39Z

1

A simple way to preload an image is to just create an image tag and set the url as the src. You don't have to attach it to the DOM to make the request.

var preLoad = function() {  
    var img = new Image();
    img.src = colors[count];
};

answered Nov 24, 2015 at 13:11

Shreyas

1,4629 silver badges12 bronze badges

4 Comments

Paulo Gustavo Over a year ago

Is it works only external images or local images to?

Paulo Gustavo Over a year ago

hmm, and how I can use this 'img' in the background, ? for example: $('<img/>').attr('src', img).load(function() { $('#bkpId').css('background-image', ???); });

Shreyas Over a year ago

Once you preload an image using the above, the browser caches it, so when you need to show the image you just set its URL as the src for the visible image tag, and the browser will load the image from the cache, without actually making a new request.

Paulo Gustavo Over a year ago

hmmmm, I understand now. Thanks

Collectives™ on Stack Overflow

Preload image with Javascript and CSS

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related