Question

我正在尝试编写一个简单的javascript代码段，将图像加载延迟一定数量的毫秒。

<html>
<head>
<script type="text/javascript">


function SetTimer()
{
        var Timer = setInterval("showImage()",3000);
}

function showImage()
{
document.getElementById('showImage').style.visibility = 'visible';

}


</script>
</head>
<body onLoad="SetTimer()" style="visibility:hidden">
<div id=showImage>
<a href="home.php"><img src="gwyneth_paltrow_2.jpg"></a>
</div>
</body>
</html>

我接近这个错误吗？

提前致谢

Answer 1

这基本上是一种很好的方法。有一些错误，即：

document.getElementByID('showImage')style.visibility = 'hidden';

getElementByID应为getElementById

需要一个点后（'showImage'）

您将可见性设置为“隐藏”以显示它。相反，你应该从隐藏开始，然后让它出现而不是消失。

Answer 2

document.getElementById('showImage').style.visibility = 'hidden';

Answer 3

嗯，考虑到延迟图像外观的既定目标，代码是向后的。如果我只是使用您的代码作为基础，那么我将使用CSS将图像的可见性隐藏起来，然后触发显示在计时器上可见。

然而，说过......这并没有延迟图像的加载，它只是延迟了它的显示。处理它的另一种方法是使用计时器在Javascript中加载Image对象，然后将其插入DOM。然后，这将实际上延迟图像的加载3秒。像这样：

function showImage()
{
  var myImage = new Image();
  myImage.src = "gwyneth_paltrow_2.jpg";
  document.getElementById("showImage").appendChild(myImage);
}

我是从记忆中做到的，所以语法可能不完全正确。

javascript：简单的延迟图像显示

3 个答案: