0

我正在尝试执行以下操作：

onClick，将image1替换为image2，然后5秒后，再次将image 2替换为image 1。

图像 1 被图像 2 替换，但我的问题是超时后它不会恢复。

这是我的代码：

<img id="loadimg" style="display:none;" src="images/Loader.gif" width="140" height="30" />

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

function showLoad(){
    document.getElementById('Generate1').src=document.getElementById('loadimg').src;
    setTimeout(showCode(), 5000);
}

function showCode(){
    document.getElementById('loadimg').src=document.getElementById('Generate1').src;
}

</script>

 <td colspan="3" rowspan="3"><img src="images/BUTTON.gif" alt="" name="Generate1" width="168" height="40" id="Generate1" onClick="showLoad()"></td>

谢谢你的帮助。

4

3 回答 3

1

您必须使用 id 处理同一图像Generate1并将初始图像存储src在临时值中（例如var image）：

var image = document.getElementById('Generate1').src;

function showLoad(){
    document.getElementById('Generate1').src = document.getElementById('loadimg').src;
    setTimeout(showCode, 5000);
}

function showCode(){
    document.getElementById('Generate1').src = image;
}
于 2012-05-05T13:59:03.967 回答
1

您不想运行showCode并将结果传递给setTimeout，您想将函数本身作为参数传递给，setTimeout以便可以回调它：

setTimeout(showCode, 5000);

此外，当您分配document.getElementById('loadimg').src给 时document.getElementById('Generate1').src，执行相反的操作不会改变任何内容。您需要将原始数据保存在变量中。您也可以将元素保存在变量中：

var Generate1 = document.getElementById('Generate1');
var loadimg = document.getElementById('loadimg');
var originalSrc = Generate1.src;

function showLoad() {
    Generate1.src = loadimg.src;
    setTimeout(showCode, 5000);
}

function showCode() {
    loadimg.src = originalSrc;
}
于 2012-05-05T13:59:20.223 回答
1

那是因为旧图像正在被新图像“碾压”。你可以这样做：

var pathToGenerateImg = "..."; // path to generate
var pathToLoadImg = "..."; // path to load img

function showLoad(){
    document.getElementById('Generate1').src = pathToLoadImg;
    setTimeout(showCode, 5000);
}

function showCode(){
    document.getElementById('Generate1').src = pathToGenerateImg ;
}

在这种情况下，您只需要单个<IMG>容器（带有id="Generate1"），因为所有路径都存储在变量中。

于 2012-05-05T14:01:32.937 回答