Question

I am animating sprites in a HTML/JavaScript game by showing/hiding/repositioning many divs, each with a CSS background image.

I’d like to load some of the images only when they are first needed, rather than loading them all when the page is first loaded.

Will setting them all to “display:none” initially and then showing/hiding them with “display:inline” do this?

Or should I append and remove the divs as needed? Or is there another way to do this?

(I’ve already optimized the image file sizes using various tools, so this question is specifically about finding a way to load the images as needed with HTML/JS rather than all at once.)

Answer 1

You can do this by storing the URLs for the background images in an associative array and retrieving them when you wish to apply them to the backgroundImage style of the div.

Example:

var resources = {div1:"url(image1.png)",div2:"url(image2.png)",div3:"url(image3.png)"};

function loadImageBG(id) {
  document.getElementById(id).style.backgroundImage = resources[id];
}

where

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

are the divs you wish to supply background images for.