javascript - 如何在 javascript 幻灯片加载之前停止加载图像？

Question

我是新手，有一个简单的问题。我的主页上有一个非常简单的幻灯片。我遇到的问题是加载页面的第一秒左右，幻灯片图像显示在另一个之上。一旦加载页面的第一秒左右结束，一切就正常了。这是我的 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，他们也会看到第一张图像。