CODEWITHSUNDEEP
javascriptjquerycanvas
bob
bob

Reputation: 9

Canvas load image before anything starts?

When I play my game and click space I show a pause screen with info and images. However the images dont show for like 5 seconds after the page is loaded. I guess this is because they are still loading. How can I prevent canvas from running until the images are loaded?

http://www.taffatech.com/Snake.html click space straight away. then click it again, wait 6-10 seconds and press it again.

this is the code for showing the images:

if(level == 1)
{
var img = new Image();
img.src = 'egg.png';
con.drawImage(img,350,40);
}
else if(level ==2)
{
var img = new Image();
img.src = 'baby.png';
con.drawImage(img,350,40);
}

else if(level ==3)
{
var img = new Image();
img.src = 'adult.png';
con.drawImage(img,350,40);
}

else
{
 var img = new Image();
 img.src = 'ultimate.png';
 con.drawImage(img,350,40);
}

Upvotes: 0

Views: 3944

Answers (3)

Diode
Diode

Reputation: 25165

You can keep all the image paths in an array and load all the images before starting

var imageObjects = [];

function loadImages(images, onComplete) {

    var loaded = 0;

    function onLoad() {
        loaded++;
        if (loaded == images.length) {
            onComplete();
        }
    }

    for (var i = 0; i < images.length; i++) {
        var img = new Image();
        img.addEventListener("load", onLoad);
        img.src = images[i];
        imageObjects.push(img);
    }
}


function init() {
    alert("start game");
    // use imageObjects which will contain loaded images
}

loadImages(["egg.png", "baby.png", "adult.png", "ultimate.png"], init);

Upvotes: 1

Graham Robertson
Graham Robertson

Reputation: 818

You just need to delay the execution of other scripts until the image you desire has been loaded. In your JavaScript, whenever you want to preload your image, you can use the following code as a guideline:

function onImageLoad(e) {
     // Put code here to start your canvas business.
};

var image = new Image();
image.addEventListener('load', onImageLoad);
image.src = 'the/path/to/your/image.whatever'

Your onImageLoad function could render your image to the canvas (so the image load happens when you press pause), or you could have this script execute at the beginning and the function simply stores the image into a global variable. Up to you!

Hope this helps :)

Upvotes: 1

dwaddell
dwaddell

Reputation: 1506

waitForImages jQuery plugin

GitHub repository.

$('selector').waitForImages(function() {
    alert('All images are loaded.');
});

Upvotes: 0

Related Questions