Preloading Images With JavaScript

Preloading images with JavaScript

Yes. This should work on all major browsers.

Preloading images in Javascript

var image = new Image();
image.src = "http://foo.com/myimage.jpg";

//if you have a div on the page that's waiting for this image...
var div = getElementById("imageWrapperDiv");

//you can set it on the image object as the item to draw into...
image.myDiv = div;

image.onload = function(){
  //do whatever you're going to do to display the image

  //so in this example, because I have set this objects myDiv property to a div on the page
 // I can then just populate that div with an img tag.
 //it's not the most elegant solution, but you get the idea and can improve upon it easily
  this.myDiv.innerHTML = "<img src='" +  this.src  +"'>";
}

Once the image loads, it's in the browser's cache, so, if you use the src property you can draw it anywhere on the page and it will display instantly.

image preloading javascript

Doesn't seem like your function will preload anything. Apart from the random image selected which loads normally, the other images in the array will not be called at all.

You might want to check out JavaScript Preloading Images and Function to preload images? instead.

Preloading images in Javascript? Without jQuery

Well, you will want to use a function which loads the images at a certain point, so you might as well try to understand onLoad. It's not that hard to grasp.

"onload" is a javascript event that occurs immediately after something is loaded. In other words: onLoad is like a javascript-native function which triggers when something is loaded. That something can be a window (eg: window.onload) or a document. What you want is the document onLoad event, as it triggers when your document is loaded.

Let's provide you with a simple example...

<body onload="preloadMyImages();">

This tells the browser "when you've loaded the document, run the preloadMyImages function".

All you have to do is then use that function to load your images into the client's browser cache.

function preloadMyImages() 
{
    var imageList = [
        "image.gif",
        "example/image.jpg",
        "whatever/image.png"
    ];
    for(var i = 0; i < imageList.length; i++ ) 
    {
        var imageObject = new Image();
        imageObject.src = imageList[i];
    }
}

That practically wraps it up and provides you with a fully working example. Enjoy!

EDIT

Since - according to your comment - you are looking for some more help, I would like to point you to https://stackoverflow.com/a/1038381/2432317 which (as one of many examples) shows how that you can (and probably should - depending on what you're planning do draw on your canvas) use img.onload too.

Yet, as I stated in my comment: it will all depend on where you want to take it. The more you dive into Javascript coding, the more you will understand what's going on. There are several good (partly free) books out there explaining how to code Javascript, use the HTML5 canvas, create preloaders, animations, talk about scopes etc.

A quick check at the big G of search engines turns up ample examples and tutorials too which will be helpfull for you. One of many examples: "How To Draw Images Onto Your HTML5 Canvas" which shows you preloading and looping an animation in a short and crisp tutorial.

But please, don't expect us to code it all for you - it's not going to happen. This is one of the not-so-rare cases where "learning by doing" will actually make you smarter. And if you hit another problem on your way to your final goal, you can always post a new question related to that new problem.

Preloading Images With JavaScript