javascript - 灰色屏幕，出现 7 秒，当更改背景图像时

Question

我做了一个webite , 在该网站上，每 7 秒更改 3 张图片，共 3 圈。

代码:

var swap;
function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    var swap = window.setInterval(func, interval);
}

run(7000, 3);

和后半部分(我不认为问题在那里。)

$(window).scroll(function(){
    //... your logic goes here...
    $("body").css("background-image", "background-image: url(1.jpg)");
    if(youWantToStopTheInterval){
        window.clearInterval(swap);
        $("body").css("background-image", "background-image: url(1.jpg)");
    }
});

CSS:

#b1 {
    /* Location of the image */
    background-image: url(1.jpg);
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based
     on the container's size */
    background-size: cover;
    /* Set a background color that will be displayed
     while the background image is loading */
    background-color: #464646;
}
#b2 {
    /* Location of the image */
    background-image: url(2.jpg);
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based
     on the container's size */
    background-size: cover;
    /* Set a background color that will be displayed
     while the background image is loading */
    background-color: #464646;
}
#b3 {
    /* Location of the image */
    background-image: url(3.jpg);
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based
     on the container's size */
    background-size: cover;
    /* Set a background color that will be displayed
     while the background image is loading */
    background-color: #464646;
}

现在，如果我们刷新或加载页面，背景中会出现灰色(我无缘无故地看到)，并持续 7 秒...(然后，一切都完美了)为什么？/如何解决？

Answer 1

因此您应该在设置间隔之前执行该函数以设置初始图像，这就是为什么您会看到空白 7 秒的原因。

此外，您永远不会看到所有图像，因为您增加了 int 变量，然后在可以使用该值之前检查并重置它。你应该改变你的 if 检查。

fiddle :http://jsfiddle.net/AtheistP3ace/5f566hrc/

var swap;
function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b" + int;
        int++;
        if(int > frames) { int = 1; }
    }
    func();
    var swap = window.setInterval(func, interval);
}

run(7000, 3);

除此之外，更改元素的 ID 以实现此目的对我来说似乎很老套。这并不完美，可能有更好的方法来做到这一点，但使用类仍然比一遍又一遍地更改元素 ID 更好。

fiddle :http://jsfiddle.net/AtheistP3ace/5f566hrc/1/

var swap;
function run(interval, frames) {
    var int = 1;
    var previousClass = "";

    function func() {
        if (previousClass != "") {
            document.body.classList.remove(previousClass);
        }
        previousClass = "b" + int;
        document.body.classList.add(previousClass);
        int++;
        if(int > frames) { int = 1; }
    }
    func();
    var swap = window.setInterval(func, interval);
}

run(7000, 3);

CSS:

.b1 {
    ...
}
.b2 {
    ...
}
.b3 {
    ...
}