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?

guyzyl
  • 387
  • 5
  • 18
  • Please do not link your local site. it could be gone in years from now... please show the code you used.... – Naftali May 23 '12 at 19:08
  • [Here's an answer](http://stackoverflow.com/a/9962592/575527) I did on a similar topic – Joseph May 23 '12 at 19:09
  • 1
    possible duplicate of [Waiting for image to load in Javascript](http://stackoverflow.com/questions/2342132/waiting-for-image-to-load-in-javascript) – Matt Ball May 23 '12 at 19:10
  • you can find the answer at [JavaScript Preloading Images](http://stackoverflow.com/questions/3646036/javascript-preloading-images) (marked as duplicate) – Bergi May 23 '12 at 19:13

3 Answers3

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

Thielicious
  • 4,122
  • 2
  • 25
  • 35
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.

Yevgeny Simkin
  • 27,946
  • 39
  • 137
  • 236
  • 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? – guyzyl May 23 '12 at 19:17
  • image.src is just a string. I'll edit my answer to show you how to actually display the image – Yevgeny Simkin May 23 '12 at 19:19
  • thanks for the update and the answer, I will now try to implement it to my website, and see if the works for me – guyzyl May 23 '12 at 19:22
  • 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
    tag somewhere in it!
     – Yevgeny Simkin May 23 '12 at 19:24
  • I am not doing this exactly as you wrote it, I am using your previous unimplemented example – guyzyl May 23 '12 at 19:38
  • SUCCESS!, it worked, thanks for everything (now i have some design problems i need to fix, but that doesnt matter), so thank you very much – guyzyl May 23 '12 at 19:57
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/

Ross R
  • 387
  • 1
  • 5
  • 21
  • 1
    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! – Yevgeny Simkin May 23 '12 at 19:13
  • 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 – guyzyl May 23 '12 at 19:15
  • 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. – Yevgeny Simkin May 23 '12 at 19:16
  • Will browsers really load invisible images? – Bergi May 23 '12 at 19:17
  • 1
    @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. – Yevgeny Simkin May 23 '12 at 19:18
  • This is for static images only, obviously. Since the page loads from the head down, you need to place the dive before where they are used. I typically will use this say in a image gallery sideshow, the first image is loaded and by the time the user switches or the time experience the image has been loaded – Ross R May 23 '12 at 19:24
  • @Ross R, but what's the point? What prompts the preload div to actually display when the images finish loading? I'm failing to see what problem this solves. – Yevgeny Simkin May 23 '12 at 19:25