Question

这一天一直在苦苦挣扎，我已经到了我的代码根本不工作的地步！我想做的是：

当用户点击ImageButton1时，该图片会被另一张图片LoadingImg替换，然后在10秒后，该图片会被另一张图片/按钮替换ImageButton2

这是我的非功能代码：

<img src="images/xboxsite_14.gif" id="ImageButton1" onClick="showLoad()">
<img src="images/getld.png" id="ImageButton2" alt="Get Last Digits" style="display:none;">
<img src="images/Loader.gif" id="LoadingImg" style="display:none;">

<script type="text/javascript" language="javascript">  

function showLoad() {
    document.getElementById('ImageButton1').src=document.getElementById('LoadingImg').src;
    document.getElementById('LoadingImg').style.display='block';
    setTimeout(swapImageSrc, 1000);
}

function swapImageSrc() {
    document.getElementById('LoadingImg').src = document.getElementById('ImageButton2').src;
    document.getElementById('LoadingImg').style.display='none';
    document.getElementById('ImageButton2').style.display='block';
    document.getElementById('Code1String').style.display='block';
}

</script>

我能想到的唯一一件事就是我改变了charset = iso-8859-1＆＃39;到＆＃39; charset = UTF-8＆＃39;因为我得到了一个不受支持的字符＆＃39;随机错误（没有）。

如果有人能解决这个问题，那么我将非常感激，谢谢！

Answer 1

我清理了你的逻辑...... http://jsfiddle.net/3ySkE/

function showLoad() {
    document.getElementById('ImageButton1').src = document.getElementById('LoadingImg').src;

    setTimeout(swapImageSrc, 1000);
}

function swapImageSrc() {
    document.getElementById('ImageButton1').src = document.getElementById('ImageButton2').src;

}

Answer 2

这有效......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org      /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<script  language="javascript">  

function showLoad() {   

 document.getElementById('ImageButton1').src = '';
 document.getElementById('LoadingImg').src = 'images/Loader.gif';
 setTimeout(swapImageSrc, 10000);
}

function swapImageSrc() {
 document.getElementById('LoadingImg').src = '';    
 document.getElementById('ImageButton2').src = 'images/getld.png';
 document.getElementById('Code1String').style.display='block';
}

</script>
</head>

<body>

<img src="images/xboxsite_14.gif" id="ImageButton1" onclick="showLoad()">
<img src="" id="ImageButton2">
<img src="" id="LoadingImg">

</body>
</html>

Answer 3

我当然可能错了，但可能是你所追求的，一个更干净的代码可能会帮助你调试你的问题：

<img src="images/xboxsite_14.gif" id="ImageButton1" onClick="action();">

<script type="text/javascript" language="javascript">  

function action()
{
swapImage('images/getld.png') ;
window.setTimeout(function ()
{
swapImage('images/Loader.gif') 
}, 1000)
};


var swapImage = function(src)
{
    document.getElementById("ImageButton1").src = src;
}


</script>

单击“加载”后更改按钮图像，然后在10秒后更改另一个图像

3 个答案: