Question

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

onClick，将image1替换为image2，然后在5秒后，再次将图像2替换为图像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>

感谢您的帮助。

Answer 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;
}

Answer 2

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

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;
}

Answer 3

这是因为旧图像正在被新图像“重新运行”。你可以这样做：

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"），因为所有路径都存储在变量中。

用另一个图像替换图像，然后在超时后再次替换 - Javascript

3 个答案: