Preloading images in Javascript - Stack Overflow

admin管理员组

文章数量:1347691

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?

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?

• javascript
• image
• web
• gallery
• photos

Share Improve this question Follow edited Apr 11, 2017 at 12:08 guyzyl asked May 23, 2012 at 19:06 guyzylguyzyl 38755 silver badges1919 bronze badges 4

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

Add a ment  | 

3 Answers 3

Sorted by: 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/en-US/docs/Web/HTML/Preloading_content

var image = new Image();
image.src = "http://foo./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.

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./pure-css-better-image-preloading-without-javascript/

本文标签： Preloading images in JavascriptStack Overflow