Onclick显示加载图片 [英] Onclick show loading image
问题描述
我正在绝望地尝试将我的图片loader.gif显示在下一页加载时按下按钮时（它在游戏中大约需要30秒）
这是我的代码我做错了什么？
< ！DOCTYPE html >
< html lang = en >
< head >
< 标题 > Hangman < / title >
< link rel = stylesheet href = hangman.css >
< script >
$（document）.ready（function（）{
$（。easy）。click（function（e） {
$（。loading）。css（background-image，url（'loader.gif'））;
}）;
}）;
< / script >
< / head >
< style >
body {
background-color：black;
background-image：
径向渐变（白色，rgba（255,255,255，.2）2px，透明40px），
径向渐变（白色，rgba（255,255,255，.15）1px，透明30px），
径向渐变（白色，rgba（255,255,255，.1）2px，透明40px），
径向渐变（rgba（255,255,255，.4），rgba（255,255,255，.1） 2px，透明30px）;
背景尺寸：550px 550px，350px 350px，250px 250px，150px 150px;
background-position：0 0,40px 60px，130px 270px，70px 100px;
}
p，H1 {
颜色：＃00FF00;
字体大小：30px;
}
#mainMenu {
margin-left：auto;
margin-right：auto;
宽度：70px;
border：1px solid＃00FF00;
}
#headWrapper {
margin-left：40px;
margin-right：auto;
}
。loading {
position：fixed;剩余
：0px;
top：0px;
宽度：100％;
身高：100％;
z-index：9999;
background：url（'loader.gif'）50％50％no-repeat rgb（249,249,249）;
}
< / style >
< body >
< div id = headWrapper >
< H1 > 选择难度< / H1 >
< / div >
< div id = mainMenu >
< input 类型 = 按钮 onclick = location.href ='http：//deathcrow.altervista.org/gd/hangman/easy/' value = 简单 class = 简单 >
< input type = 按钮 onclick = location.href ='http：//deathcrow.altervista.org/gd/hangman/medium/' value = 中级 class = easy >
< 输入 type = 按钮 onclick = location.href ='http：//deathcrow.altervista.org/gd/hangman/hard/' value = 硬 >
< 输入 类型 = 按钮 onclick = location.href ='http：//deathcrow.altervista.org/gd/hangman/insanity/' value = Insa ne >
< / div >
(document).ready(function() {
（。easy）。click（function（e）{
< BLOCKQUOTE>（ 加载 ）的CSS（ 背景图像， URL（ 'loader.gif'））。
}）;
}）;
< / script >
< / head >
< style >
body {
background-color：black;
background-image：
径向渐变（白色，rgba（255,255,255，.2）2px，透明40px），
径向渐变（白色，rgba（255,255,255，.15）1px，透明30px），
径向渐变（白色，rgba（255,255,255，.1）2px，透明40px），
径向渐变（rgba（255,255,255，.4），rgba（255,255,255，.1） 2px，透明30px）;
背景尺寸：550px 550px，350px 350px，250px 250px，150px 150px;
background-position：0 0,40px 60px，130px 270px，70px 100px;
}
p，H1 {
颜色：＃00FF00;
字体大小：30px;
}
#mainMenu {
margin-left：auto;
margin-right：auto;
宽度：70px;
border：1px solid＃00FF00;
}
#headWrapper {
margin-left：40px;
margin-right：auto;
}
。loading {
position：fixed;剩余
：0px;
top：0px;
宽度：100％;
身高：100％;
z-index：9999;
background：url（'loader.gif'）50％50％no-repeat rgb（249,249,249）;
}
< / style >
< body >
< div id = headWrapper >
< H1 > 选择难度< / H1 >
< / div >
< div id = mainMenu >
< input 类型 = 按钮 onclick = location.href ='http：//deathcrow.altervista.org/gd/hangman/easy/' value = 简单 class = 简单 >
< input type = 按钮 onclick = location.href ='http：//deathcrow.altervista.org/gd/hangman/medium/' value = 中级 class = easy >
< 输入 type = 按钮 onclick = location.href ='http：//deathcrow.altervista.org/gd/hangman/hard/' value = 硬 >
< 输入 类型 = 按钮 onclick = location.href ='http：//deathcrow.altervista.org/gd/hangman/insanity/' value = Insa ne >
< / div >
I am trying desperatly to get my image "loader.gif" to show when the button is clicked while the next page loads(it takes around 30sec bc its a game)
Here is my code what am i doig wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hangman</title>
<link rel="stylesheet" href="hangman.css">
<script>
$(document).ready(function () {
$(".easy").click(function (e) {
$(".loading").css("background-image","url('loader.gif')");
});
});
</script>
</head>
<style>
body{
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}
p,H1{
color: #00FF00;
font-size:30px;
}
#mainMenu{
margin-left:auto;
margin-right:auto;
width:70px;
border:1px solid #00FF00;
}
#headWrapper{
margin-left:40px;
margin-right:auto;
}
.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
<body>
<div id="headWrapper">
<H1>Select a difficulty</H1>
</div>
<div id="mainMenu">
<input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/easy/'" value="Easy" class="easy" >
<input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/medium/'" value="Intermediate" class="easy">
<input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/hard/'" value="Hard">
<input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/insanity/'" value="Insane">
</div>(document).ready(function () {
(".easy").click(function (e) {
(".loading").css("background-image","url('loader.gif')"); }); }); </script> </head> <style> body{ background-color:black; background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; } p,H1{ color: #00FF00; font-size:30px; } #mainMenu{ margin-left:auto; margin-right:auto; width:70px; border:1px solid #00FF00; } #headWrapper{ margin-left:40px; margin-right:auto; } .loading { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('loader.gif') 50% 50% no-repeat rgb(249,249,249); } </style> <body> <div id="headWrapper"> <H1>Select a difficulty</H1> </div> <div id="mainMenu"> <input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/easy/'" value="Easy" class="easy" > <input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/medium/'" value="Intermediate" class="easy"> <input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/hard/'" value="Hard"> <input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/insanity/'" value="Insane"> </div>
这篇关于Onclick显示加载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
