Question

我有这段代码：

<script language="JavaScript1.2">
    var bgimages = new Array()
    bgimages[0] = "images/door.jpg"
    bgimages[1] = "images/stephane.jpg"
    bgimages[2] = "images/haotel.jpg"

    //preload images
    var pathToImg = new Array()
    for (i = 0; i < bgimages.length; i++) {
        pathToImg[i] = new Image()
        pathToImg[i].src = bgimages[i]
    }

    var inc = -1

    function bgSlide() {
        if (inc < bgimages.length - 1) inc++
        else inc = 0
        document.body.background = pathToImg[inc].src
    }

    if (document.all || document.getElementById) window.onload = new Function('setInterval("bgSlide()",8000)')
</script>

使用这个CSS：

body {
    /*Remove below line to make bgimage NOT fixed*/
    background-attachment:fixed;
    background-repeat: no-repeat;
    /*Use center center in place of 300 200 to center bg image*/
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

有效;它显示一个完整大小的图像作为页面背景并更改它们，但在初始刷新页面时，它是脚本前8秒的白色屏幕。如何更改它以便它能立即显示？

Answer 1

你应该加载一个背景图像作为默认值（比如在CSS中），或者你应该在页面加载之后立即关闭你的document.body.background=pathToImg[inc].src，然后你的setInterval（setInterval将在它之前等待8秒）什么都做。）

Answer 2

立刻开火bgSlide。然后创建一个每8秒触发一次的Interval 秒。

   window.onload = function(){
        bgSlide();
        setInterval(function(){
            bgSlide();
        }, 8000);
    }

Answer 3

当页面加载时，您将触发setInterval 8秒钟，这意味着只有8秒后您才能获得第一张背景图像。尝试通过CSS设置您想要的背景。除此之外，您可以在启动setInterval之前编写document.body.background=pathToImg[0]代码来触发。当然这样你可能想要在pathToImg [1]开始旋转，否则你将有16秒的pathToImg [0]。

为什么我的背景幻灯片动画在更改之间有延迟？

3 个答案: