Pull in HTML resource in background in jQuery

Question

There is a button on the page. When the button is pressed, a pop-up menu appears. The drop-down list contains an image. The problem is that the image does not load until the user clicks a button.

$("#my_button").click(function(){ $("#my_dropdown").html("<img src=\"http://mysite.com/image.jpg\" />"); }); 

I would like to get the image when the page loads, so that it is ready to work when the user clicks on the drop-down list. How can i do this? I thought that I could insert the image on the page using display:none so that it got into the cache, or is there a way to load when the document is loaded in jQuery?

This is for the Chrome extension if it has any meaning. I suppose I could put the image in the extension (and it will be faster), but I still wonder if it is possible to upload the image using JS.

Thanks Kevin

Answer 1

Yes. Just define it as a new image in the ready () request of the page:

 $(document).ready( function() { var preload = new Image(); preload.src = "http://mysite.com/image.jpg"; }); 

Then, when you use it, it will already be in the browser cache. You can use the variable or just refer to it the same way you do.

Answer 2

You can preload each image ...

 $(document).ready(function() { (new Image()).src = '/path/to/myImage.jpg'; });