Question

我写了一个简单的javascript图像旋转器，它在每个页面加载时选择一个随机图像。问题是，如果我使用默认图像，该默认图像将在javascript加载之前显示一秒钟并替换它。显然，如果有人禁用了JavaScript，我希望他们看到图片。如何在没有默认图像闪烁的情况下拥有默认图像。

Answer 1

听起来你想在window.onload触发之前更改页面HTML（因为此时已经显示了默认图像）。

您需要将javascript函数附加到“DOMContentLoaded”或通常称为domready事件。 Dean Edwards为我们提供了一个很棒的跨浏览器实现http://dean.edwards.name/weblog/2006/06/again/。

希望有所帮助：）

Answer 2

如果您在页面加载时首先隐藏默认图像，则用户可能无法看到图像。然后，您可以在映像上安装onload处理程序，并将其源更改为随机映像。加载图像时，您可以取消隐藏图像。

window.onload = function () {
    var img = document.getElementById("rotating_image");

    // Hide the default image that's shown to people with no JS
    img.style.visibility = "hidden";

    // We'll unhide it when our new image loads
    img.onload = function () {
        img.style.visibility = "visible";
    };

    // Load a random image
    img.src = "http://example.com/random" + Math.floor(Math.random() * 5) + ".jpg";

};

Answer 3

您可能还想考虑在图像之后立即放置JS。这可以在该点执行JS，而不是在页面加载时执行。但我对此并不确定。

<img src="/not/rotated/image.jpg" />
<script type="text/javascript">
// change image
</script>

javascript图像旋转器问题，默认图像

3 个答案: