Preload Image With Javascript And Css

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 =

Solution 1:

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 = newArray()
functionpreload() {
  for (i = 0; i < preload.arguments.length; i++) {
    images[i] = newImage()
    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"
)

See more

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

Solution 2:

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 = newImage();
    img.src = colors[count];
};