4

I have created a simple photo gallery viewer, and I would like to preload the images in the background, and then run a function when they are done.

My question is, how do I do that?

Improve this question
4
  • Please do not link your local site. it could be gone in years from now... please show the code you used.... Commented May 23, 2012 at 19:08
  • Here's an answer I did on a similar topic Commented May 23, 2012 at 19:09
  • 1
    possible duplicate of Waiting for image to load in Javascript Commented May 23, 2012 at 19:10
  • you can find the answer at JavaScript Preloading Images (marked as duplicate) Commented May 23, 2012 at 19:13

3 Answers 3

Reset to default
4

To preload an image use the <link> tag and add preload to the rel-attribute:

<link rel=preload href=path/to/the/image.jpg as=image>

Alternatively in Javascript:

var preImg = document.createElement('link') preImg.href = 'path/to/image.jpg' preImg.rel = 'preload' preImg.as = 'image' document.head.appendChild(preImg)

The preload value of the element's rel attribute allows you to write declarative fetch requests in your HTML , specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements.

Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

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

Comments

3 
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.

Improve this answer

6 Comments

that seems to be the solution i am looking for! so if i want to write the image when its done loading, i should creat a write function, and use the image.src as directory?
image.src is just a string. I'll edit my answer to show you how to actually display the image
thanks for the update and the answer, I will now try to implement it to my website, and see if the works for me
keep in mind that if you follow this example exactly, you'll need to not do any of this till the page finishes loading, otherwise getElementById("imageWrapperDiv") will return undefined since there is no such element until the page loads (and contains a <div id="imageWrapperDiv"> tag somewhere in it!
I am not doing this exactly as you wrote it, I am using your previous unimplemented example
|
2

I like this CSS method versus the typical Javascript function:

Place this in your CSS file:

div#preload { display: none; }

Place this at the bottom of your HTML document:

<div id="preload"> <img src="http://domain.tld/image-01.png" width="1" height="1" alt="Image 01" /> <img src="http://domain.tld/image-02.png" width="1" height="1" alt="Image 02" /> <img src="http://domain.tld/image-03.png" width="1" height="1" alt="Image 03" /> </div>

This method ensures that your images are preloaded and available for use elsewhere in the document. Just remember to use the same path as the the preloaded images.

http://perishablepress.com/pure-css-better-image-preloading-without-javascript/

Improve this answer

7 Comments

how do you know when the images are done loading? and what is the advantage here over the method I post beneath? Note that the comments in the link you posted say the exact same thing and advise against using this method!
in addition to what DR.Dredel said, I need to load a different image each time, so I am not going to use css, since the gallery and picture id are in javascript
using my method, just replace the url string that you pass to the src property and you'll load different images. Obviously you can have as many Image objects on the page as you need.
Will browsers really load invisible images?
@Bergi, browsers don't care if they're visible or not, and in fact, the browser has no interest in even worrying about their visibility until there's actual byte data to display, so yeah, they'll download whatever you tell them the src is and then see what to do next.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.