CODEWITHSUNDEEP
javascriptpreload
lindsey
lindsey

Reputation: 59

Preload Images in JavaScript

I'm working on a little game where you press a button and a new image appears. There's a glitch every time you ask a new image to display and it occurred to me that I should preload the necessary images. However, I'm not sure how to do this efficiently as I'm not using a variable to display the images. This is what I'm working on. Any suggestions?

HTML:

<body onLoad="setup()">
<div id="wrapper">
        <div id="jajo"></div><!--this is where jajo will be displayed-->
        <div id="directions"></div><!--directions for how to interact with jajo-->
    </div><!--wrapper-->
</body>

JavaScript:

// Calls the loadJajo function and passes the image URL
// Initiates directionSlide function
function setup() {
loadJajo('jajo.png');
elem = document.getElementById('directions');
directionSlide();
}

//Creates a new image object (Jajo) and writes it to the page.
function loadJajo(jajoSRC) {
var main = document.getElementById('jajo'); // Creates an variable to represent the "main" division
var defaultJajo = document.createElement('img'); // Creates a new image object (default Jajo image)
defaultJajo.src = jajoSRC; // adds the source file name to the defaultJajo image object
main.appendChild(defaultJajo); //puts the defaultJajo object inside the "main" division
}

// Listen for key pressed events.
document.onkeydown = function(event) {
var keyPress = String.fromCharCode(event.keyCode); // Assigns value of key pressed to variable.

if(keyPress == "W") { // If 'W' is pressed, display Jajo waving.
    document.getElementById("jajo").innerHTML= "<img alt='car' src='jajo_wave.png'>";
    document.onkeyup = function(event) { // If 'W' is released, display default Jajo.
        document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
    }
} else if(keyPress == "A") { // If 'A' is pressed, display Jajo winking.
    document.getElementById("jajo").innerHTML= "<img alt='car' src='jajo_wink.png'>";
    document.onkeyup = function(event) { // If 'A' is released, display default Jajo.
        document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
    }
} else if(keyPress == "S") { // If 'S' is pressed, display transparent Jajo.
    document.getElementById("jajo").innerHTML= "<img alt='car' src='jajo_invisible.png'>";
    document.onkeyup = function(event) { // If 'S' is released, display default Jajo.
        document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
    }
} else if(keyPress == "D") { // If 'D' is pressed, display purple Jajo.
    document.getElementById("jajo").innerHTML= "<img alt='car' src='jajo_purple.png'>";
    document.onkeyup = function(event) { // If 'D' is released, display default Jajo.
        document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
    }
} else if(keyPress == "E") { // If 'E' is pressed, display Jajo eating a carrot.
    document.getElementById("jajo").innerHTML= "<img alt='car' src='jajo_carrot.png'>";
    document.onkeyup = function(event) { // If 'E' is released, display default Jajo.
        document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
    }
}
}

var elem;
var i = 0; // Counter variable.
// Array with directions for interacting with Jajo.
var directionArray = ["This is Jajo, your new pet monster!",
             "Jajo wants to say 'Hi!'<br>Press and hold 'W'",
             "Jajo has some special skills.<br>Press and hold 'D' to see one!",
             "Jajo is hungry for a healthy snack.<br>Press and hold 'E'",
             "Jajo wants to show you his secret power.<br>Press and hold 'S'",
             "That secret is just between you and Jajo!<br>Press and hold 'A'"];

// Transitions one direction to the next.
function nextDirection() {
i++; // Continuously add 1 to i.
elem.style.opacity = 0; // Directions opacity at 0%.
if(i > (directionArray.length - 1)) { // Resets counter to 0 when it reaches the end of the array.
    i = 0;
}
setTimeout(directionSlide,1000); // Set time delay for transition between directions.
}

// Displays direction one at a time.
// http://www.developphp.com/view.php?tid=1380
function directionSlide() {
elem.innerHTML = directionArray[i]; // Displays direction based on position of counter variable.
elem.style.opacity = 1; // Direction opacity at 100%.
setTimeout(nextDirection,5000); // Set time delay for display of directions.
}

Upvotes: 1

Views: 592

Answers (2)

raythurnevoid
raythurnevoid

Reputation: 2824

I've answered a similar question there:

https://stackoverflow.com/a/46121439/1951947

In your case it would be:

<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">

and then you can use your image anywhere you like and it would be already cached (preloaded)

Upvotes: 0

Sampson
Sampson

Reputation: 268326

Preloading Images with JavaScript

Place the image paths within an array, and iterate over that array:

(function () {
    // All image paths go in this array
    var images = [ "jajo_wave.png", "jajo_wink.png" ];
    // Cycle over the array, pre-loading each image
    for ( var i = 0; i < images.length; i++ ) {
        // Create new image object
        var image = document.createElement( "img" );
        // For debugging, output successful preloading msg
        image.onload = function () {
            console.log( "Loaded: " + this.src );
        }
        // Set image source
        image.src = images[ i ];
    }
}());

But More Importantly...

As stated in the comment above, your code should be refactored quite a bit. Please do take advantage of a codereview over at https://codereview.stackexchange.com/.

One very prominent issue you'll want to address is the constant trips back and forth to the DOM looking up the same element. Store references to your element(s) so you don't need to run around looking for them all the time.

Upvotes: 1

Related Questions