Question

我是新手，并有一个快速的问题。我的主页上有一个非常简单的幻灯片。我遇到的问题是加载页面的第一秒左右，幻灯片显示图像在另一个上面显示1。一旦加载页面的第一秒左右结束，一切正常。这是我的javascript代码：

<script type="text/javascript" language="javascript">
        window.onload = function () {
            var rotator = document.getElementById("slideshow_content");
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function () {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 3000);
        };
    </script>

这是正文代码：

<div id="slideshow">
<div id="slideshow_content" style="padding-top:10px; padding-bottom:10px;">
        <img alt="" src="/images/slide1.jpg" />
        <img alt="" src="/images/slide2.jpg" />
</div>
</div>

以下是2个div的CSS：

#slideshow {position:relative; top:0; left:0; max-width:1680px; height:342px; margin:0     auto; padding:0; background-color:#070707;}
#slideshow_content {width:960px; max-height:322px; margin:0 auto; padding:0;}

你会如何建议解决这个问题？

Answer 1

我会设置CSS以隐藏页面加载时的幻灯片，然后当幻灯片开始时它可以被取消隐藏。

这也意味着，如果某人禁用了javascript，他们就不会看到一堆奇怪的图像。

或者你可以使用CSS隐藏除第一个图像之外的所有图像，这样即使有人禁用了javascript，他们也会看到第一个图像。

如何在加载javascript幻灯片之前停止加载我的图片？

1 个答案: