Asynchronous image loading problem

MooShop · 19-07-2014 5:16pm #1

I'm creating a Hangman game for a project. I have most of the functionality I need, however I am having one issue. When the last incorrect guess is made, it displays the alert box telling you you've lost, before loading the image. I want the image to load first and then the alert box.

I have spent some time trying to get this working and have read a good bit online but just can't seem to get it working. I realise that the issue is with the way the DOM loads elements and that I should create a callback function in Jquery. I have no real knowledge of Jquery, so it's probably this that's letting me down.

This is the line in my code that changes the image, and it works fine until it gets to the last one.

document.getElementById("gallows").src = displayGallows[incorrectGuesses - 1];

I have tried using a Jquery function to get this working but my knowledge of Jquery is pretty much non-existent.

var img = $("gallows");
	img.load(function() {
		alert("Unlucky, you lost. Better luck next time!");
	});
	img.src = displayGallows[incorrectGuesses - 1];

I have compared this to many posts I have found online and to my untrained eye, it looks ok. When I was troubleshooting I did realise that the img.src was assigned the correct value but the image didn't appear on my page or didn't fire the alert box.

This led me to believe that it may be an issue with linking to the jquery.js file. I have an HTML page that references the jquery file in it's head tag.

<head>
	<title>Hangman</title>
	<link rel="stylesheet" href="base.css"/>
	<script src="jquery.js"></script>
	<script src="hangman.js"></script>
	<script src="home.js"></script>
</head>

The file I am writing my javascript and jquery from is the hangman.js file.

Do I also need to refer to the jquery.js file from the hangman.js file? While reading up on this I found that I may have to do this, so I've tried this:

///<reference path="jquery.js" />

and this

var jq = document.createElement('script');
jq.src = 'jquery.js';
document.getElementsByTagName('head')[0].appendChild(jq);

but to no avail, though I don't really understand the second one! I found these examples in the dark recesses of the internet!!

Note that in my home.js file I have simple a simple jquery function to em-bold the text on a button when you mouseover it and this works ok.

If anyone could help me out or point me in the right direction that would be great. I have been banging my head against the wall trying to get this to work!

Talisman · 24-07-2014 1:38am

MooShop wrote: »

I'm creating a Hangman game for a project. I have most of the functionality I need, however I am having one issue. When the last incorrect guess is made, it displays the alert box telling you you've lost, before loading the image. I want the image to load first and then the alert box.

I have spent some time trying to get this working and have read a good bit online but just can't seem to get it working. I realise that the issue is with the way the DOM loads elements and that I should create a callback function in Jquery. I have no real knowledge of Jquery, so it's probably this that's letting me down.

This is the line in my code that changes the image, and it works fine until it gets to the last one.

This would suggest that your code is not the issue. Have you tried using Firebug to see if the image is loading?

document.getElementById("gallows").src = [B]displayGallows[incorrectGuesses - 1][/B];

What is the value of this? It's the most likely source of the issue.

I have tried using a Jquery function to get this working but my knowledge of Jquery is pretty much non-existent.
var img = $("gallows");
	img.load(function() {
		alert("Unlucky, you lost. Better luck next time!");
	});
	img.src = displayGallows[incorrectGuesses - 1];
I have compared this to many posts I have found online and to my untrained eye, it looks ok. When I was troubleshooting I did realise that the img.src was assigned the correct value but the image didn't appear on my page or didn't fire the alert box.

This led me to believe that it may be an issue with linking to the jquery.js file. I have an HTML page that references the jquery file in it's head tag.
<head>
	<title>Hangman</title>
	<link rel="stylesheet" href="base.css"/>
	<script src="jquery.js"></script>
	<script src="hangman.js"></script>
	<script src="home.js"></script>
</head>
The file I am writing my javascript and jquery from is the hangman.js file.

Do I also need to refer to the jquery.js file from the hangman.js file? While reading up on this I found that I may have to do this, so I've tried this:

No the code is executed in the browser and so long as the jQuery library is loaded before you start using the functions it should be fine.

///<reference path="jquery.js" />
and this
var jq = document.createElement('script');
jq.src = 'jquery.js';
document.getElementsByTagName('head')[0].appendChild(jq);
but to no avail, though I don't really understand the second one! I found these examples in the dark recesses of the internet!!

Forget you ever saw these.

The first one is a reference for an IDE.

The second one is a snippet to create the script tag for jquery.js and inject it into the head of the html page.

Note that in my home.js file I have simple a simple jquery function to em-bold the text on a button when you mouseover it and this works ok.

If anyone could help me out or point me in the right direction that would be great. I have been banging my head against the wall trying to get this to work!

This indicates that your code is valid and is working.

Use Firebug to step through the game and keep an eye on what's happening with your displayGallows array.

It might be beyond the scope of the project but you could create a sprite image that contains each of the hangman frames and then step through them by simply changing the CSS class on the image. You could use SpriteCow to generate the CSS code for you.

MooShop · 24-07-2014 4:03pm

Thanks for your detailed response. I got it working in the end. The code was right, I just wasn't implementing it correctly. I'm learning as I go and it's very useful to read the explanations you gave. Starting out it can be hard to decipher what is relevant on forums etc.

I think I'll take some online Jquery tutorials over my summer break in August.

Thanks again for your help.

Asynchronous image loading problem

Comments