Alert appears too early
up vote
1
down vote
favorite
This is my code in JavaScript:
$("#bot1Selected").attr("card-value", botPick.value + botPick.suit.substring(0, 1));
$("#bot1Selected").css("background-image", "url('images/cards/" + checkValue(botPick.value) + botPick.suit.substring(0, 1) + ".png')");
$("#player1Selected").attr("card-value", playerDisplay);
$("#player1Selected").css("background-image", "url('images/cards/" + checkValue(playerDisplay.slice(0, -1)) + playerDisplay[playerDisplay.length - 1] + ".png')");
if (playerVal.value > botPick.value) {
//sleep(500);
alert("Your Card is Higher");
} else {
//sleep(500);
alert("Bot's Card is Higher");
}
if (playerVal.value > botPick.value) {
endTurn(playerDiscard, [playerVal, botPick]);
} else {
endTurn(bot1Discard, [playerVal, botPick]);
}
$("#playerDiscard").text(playerDiscard.length);
$("#playerDraw").text(player.length);
Why is my alert happening before my image is reflected on the page?
javascript
edited Nov 9 at 11:17
Federico klez Culloca
15.5k134275
asked Nov 9 at 11:14
Callum
6211
add a comment |
up vote
1
down vote
favorite
This is my code in JavaScript:
$("#bot1Selected").attr("card-value", botPick.value + botPick.suit.substring(0, 1));
$("#bot1Selected").css("background-image", "url('images/cards/" + checkValue(botPick.value) + botPick.suit.substring(0, 1) + ".png')");
$("#player1Selected").attr("card-value", playerDisplay);
$("#player1Selected").css("background-image", "url('images/cards/" + checkValue(playerDisplay.slice(0, -1)) + playerDisplay[playerDisplay.length - 1] + ".png')");
if (playerVal.value > botPick.value) {
//sleep(500);
alert("Your Card is Higher");
} else {
//sleep(500);
alert("Bot's Card is Higher");
}
if (playerVal.value > botPick.value) {
endTurn(playerDiscard, [playerVal, botPick]);
} else {
endTurn(bot1Discard, [playerVal, botPick]);
}
$("#playerDiscard").text(playerDiscard.length);
$("#playerDraw").text(player.length);
Why is my alert happening before my image is reflected on the page?
javascript
edited Nov 9 at 11:17
Federico klez Culloca
15.5k134275
asked Nov 9 at 11:14
Callum
6211
1
probably because it takes time to load in the image - you should preload it so it gets cached
– Pete
Nov 9 at 11:15
1
That's because the.cssfunction is asynchrounous (it will return immediately)
– jrswgtr
Nov 9 at 11:16
Put some time delay in your code because image take some time to fetch so your alert box execute before image load.
– Shubham Baranwal
Nov 9 at 11:16
@ShubhamBaranwal a delay won't do the trick, because you can't know how long it takes to load the image.
– jrswgtr
Nov 9 at 11:18
Use load()$(window).load(function() {to wait element to load.
– Roy
Nov 9 at 11:19
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
This is my code in JavaScript:
$("#bot1Selected").attr("card-value", botPick.value + botPick.suit.substring(0, 1));
$("#bot1Selected").css("background-image", "url('images/cards/" + checkValue(botPick.value) + botPick.suit.substring(0, 1) + ".png')");
$("#player1Selected").attr("card-value", playerDisplay);
$("#player1Selected").css("background-image", "url('images/cards/" + checkValue(playerDisplay.slice(0, -1)) + playerDisplay[playerDisplay.length - 1] + ".png')");
if (playerVal.value > botPick.value) {
//sleep(500);
alert("Your Card is Higher");
} else {
//sleep(500);
alert("Bot's Card is Higher");
}
if (playerVal.value > botPick.value) {
endTurn(playerDiscard, [playerVal, botPick]);
} else {
endTurn(bot1Discard, [playerVal, botPick]);
}
$("#playerDiscard").text(playerDiscard.length);
$("#playerDraw").text(player.length);
Why is my alert happening before my image is reflected on the page?
javascript
edited Nov 9 at 11:17
Federico klez Culloca
15.5k134275
asked Nov 9 at 11:14
Callum
6211
This is my code in JavaScript:
$("#bot1Selected").attr("card-value", botPick.value + botPick.suit.substring(0, 1));
$("#bot1Selected").css("background-image", "url('images/cards/" + checkValue(botPick.value) + botPick.suit.substring(0, 1) + ".png')");
$("#player1Selected").attr("card-value", playerDisplay);
$("#player1Selected").css("background-image", "url('images/cards/" + checkValue(playerDisplay.slice(0, -1)) + playerDisplay[playerDisplay.length - 1] + ".png')");
if (playerVal.value > botPick.value) {
//sleep(500);
alert("Your Card is Higher");
} else {
//sleep(500);
alert("Bot's Card is Higher");
}
if (playerVal.value > botPick.value) {
endTurn(playerDiscard, [playerVal, botPick]);
} else {
endTurn(bot1Discard, [playerVal, botPick]);
}
$("#playerDiscard").text(playerDiscard.length);
$("#playerDraw").text(player.length);
Why is my alert happening before my image is reflected on the page?
javascript
javascript
edited Nov 9 at 11:17
Federico klez Culloca
15.5k134275
asked Nov 9 at 11:14
Callum
6211
edited Nov 9 at 11:17
Federico klez Culloca
15.5k134275
asked Nov 9 at 11:14
Callum
6211
edited Nov 9 at 11:17
Federico klez Culloca
15.5k134275
edited Nov 9 at 11:17
Federico klez Culloca
15.5k134275
edited Nov 9 at 11:17
Federico klez Culloca
15.5k134275
15.5k134275
asked Nov 9 at 11:14
Callum
6211
asked Nov 9 at 11:14
Callum
6211
asked Nov 9 at 11:14
Callum
6211
6211
1
probably because it takes time to load in the image - you should preload it so it gets cached
– Pete
Nov 9 at 11:15
1
That's because the.cssfunction is asynchrounous (it will return immediately)
– jrswgtr
Nov 9 at 11:16
Put some time delay in your code because image take some time to fetch so your alert box execute before image load.
– Shubham Baranwal
Nov 9 at 11:16
@ShubhamBaranwal a delay won't do the trick, because you can't know how long it takes to load the image.
– jrswgtr
Nov 9 at 11:18
Use load()$(window).load(function() {to wait element to load.
– Roy
Nov 9 at 11:19
add a comment |
1
probably because it takes time to load in the image - you should preload it so it gets cached
– Pete
Nov 9 at 11:15
1
That's because the.cssfunction is asynchrounous (it will return immediately)
– jrswgtr
Nov 9 at 11:16
Put some time delay in your code because image take some time to fetch so your alert box execute before image load.
– Shubham Baranwal
Nov 9 at 11:16
@ShubhamBaranwal a delay won't do the trick, because you can't know how long it takes to load the image.
– jrswgtr
Nov 9 at 11:18
Use load()$(window).load(function() {to wait element to load.
– Roy
Nov 9 at 11:19
1
1
probably because it takes time to load in the image - you should preload it so it gets cached
– Pete
Nov 9 at 11:15
probably because it takes time to load in the image - you should preload it so it gets cached
– Pete
Nov 9 at 11:15
1
1
That's because the
.css function is asynchrounous (it will return immediately)– jrswgtr
Nov 9 at 11:16
That's because the
.css function is asynchrounous (it will return immediately)– jrswgtr
Nov 9 at 11:16
Put some time delay in your code because image take some time to fetch so your alert box execute before image load.
– Shubham Baranwal
Nov 9 at 11:16
Put some time delay in your code because image take some time to fetch so your alert box execute before image load.
– Shubham Baranwal
Nov 9 at 11:16
@ShubhamBaranwal a delay won't do the trick, because you can't know how long it takes to load the image.
– jrswgtr
Nov 9 at 11:18
@ShubhamBaranwal a delay won't do the trick, because you can't know how long it takes to load the image.
– jrswgtr
Nov 9 at 11:18
Use load()
$(window).load(function() { to wait element to load.– Roy
Nov 9 at 11:19
Use load()
$(window).load(function() { to wait element to load.– Roy
Nov 9 at 11:19
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
The jQuery.css() function is asynchronous. It will return immediately, so not when the image is loaded.
Create a "dummy" image to preload it and use the onload event to determine when the image is loaded.
jQuery(document).ready(function() {
var imgUrl = "https://via.placeholder.com/350x150";
var $img = $("<img />");
$img.on("load", function() {
$("#yourImage").css("background-image", "url("+ imgUrl +")");
alert("image is loaded");
});
$img.attr("src", imgUrl);
});
answered Nov 11 at 9:38
jrswgtr
9211720
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
The jQuery.css() function is asynchronous. It will return immediately, so not when the image is loaded.
Create a "dummy" image to preload it and use the onload event to determine when the image is loaded.
jQuery(document).ready(function() {
var imgUrl = "https://via.placeholder.com/350x150";
var $img = $("<img />");
$img.on("load", function() {
$("#yourImage").css("background-image", "url("+ imgUrl +")");
alert("image is loaded");
});
$img.attr("src", imgUrl);
});
answered Nov 11 at 9:38
jrswgtr
9211720
add a comment |
up vote
0
down vote
accepted
The jQuery.css() function is asynchronous. It will return immediately, so not when the image is loaded.
Create a "dummy" image to preload it and use the onload event to determine when the image is loaded.
jQuery(document).ready(function() {
var imgUrl = "https://via.placeholder.com/350x150";
var $img = $("<img />");
$img.on("load", function() {
$("#yourImage").css("background-image", "url("+ imgUrl +")");
alert("image is loaded");
});
$img.attr("src", imgUrl);
});
answered Nov 11 at 9:38
jrswgtr
9211720
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
The jQuery.css() function is asynchronous. It will return immediately, so not when the image is loaded.
Create a "dummy" image to preload it and use the onload event to determine when the image is loaded.
jQuery(document).ready(function() {
var imgUrl = "https://via.placeholder.com/350x150";
var $img = $("<img />");
$img.on("load", function() {
$("#yourImage").css("background-image", "url("+ imgUrl +")");
alert("image is loaded");
});
$img.attr("src", imgUrl);
});
answered Nov 11 at 9:38
jrswgtr
9211720
The jQuery.css() function is asynchronous. It will return immediately, so not when the image is loaded.
Create a "dummy" image to preload it and use the onload event to determine when the image is loaded.
jQuery(document).ready(function() {
var imgUrl = "https://via.placeholder.com/350x150";
var $img = $("<img />");
$img.on("load", function() {
$("#yourImage").css("background-image", "url("+ imgUrl +")");
alert("image is loaded");
});
$img.attr("src", imgUrl);
});
answered Nov 11 at 9:38
jrswgtr
9211720
answered Nov 11 at 9:38
jrswgtr
9211720
answered Nov 11 at 9:38
jrswgtr
9211720
answered Nov 11 at 9:38
jrswgtr
9211720
9211720
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53224668%2falert-appears-too-early%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
probably because it takes time to load in the image - you should preload it so it gets cached
– Pete
Nov 9 at 11:15
1
That's because the
.cssfunction is asynchrounous (it will return immediately)– jrswgtr
Nov 9 at 11:16
Put some time delay in your code because image take some time to fetch so your alert box execute before image load.
– Shubham Baranwal
Nov 9 at 11:16
@ShubhamBaranwal a delay won't do the trick, because you can't know how long it takes to load the image.
– jrswgtr
Nov 9 at 11:18
Use load()
$(window).load(function() {to wait element to load.– Roy
Nov 9 at 11:19