Javascript css背景图像预加载

很抱歉，这个标题太模糊了，我不确定用一个简短的标题来描述这个问题的最佳方式。我的朋友一直在帮我为自己开发这个简单的网站。这是一种放松的自然之声

这是我朋友做的密码，现在我想问他，但他骑自行车穿越英国，将离开很长一段时间

$(function() {
    var forest = document.getElementById("forest");
    var dusk = document.getElementById("dusk");
    var water = document.getElementById("water");
    var storm = document.getElementById("storm");
    var playing = "";
    var muted = false;


    $('#mute').on('click', function(e) {
      $('.icon').toggleClass("off"); 
      e.preventDefault();
    });

    $("#mute").click(function() {
        if(!muted) {
            forest.volume = 0;
            dusk.volume = 0;
            water.volume = 0;
            storm.volume = 0;
            muted = true;
        } else {
            forest.volume = 1;
            dusk.volume = 1;
            water.volume = 1;
            storm.volume = 1;
            muted = false;
        }
    });

    $('.sound').click(function() {
        switch($(this).find("audio").prop("id")) {
            case "forest":
                if(playing == "forest") {
                    fade(forest);
                    return;
                }
                $('#panda').fadeTo('slow', 0.1, function() {
                    $(this).css('background-image', 'url(images/forest.jpg)');
                }).fadeTo('slow', 1.4);
                playing = "forest";
                fade(forest);
                break;
            case "dusk":
                if(playing == "dusk") {
                    fade(dusk);
                    return;
                }
                $('#panda').fadeTo('slow', 0.1, function() {
                    $(this).css('background-image', 'url(images/dusk.jpg)');
                }).fadeTo('slow', 1.4);
                playing = "dusk";
                fade(dusk);
                break;
            case "water":
                if(playing == "water") {
                    fade(water);
                    return;
                }
                $('#panda').fadeTo('slow', 0.1, function() {
                    $(this).css('background-image', 'url(images/water.jpg)');
                }).fadeTo('slow', 1.4);
                playing = "water";
                fade(water);
                break;
            case "storm":
                if(playing == "storm") {
                    fade(storm);
                    return;
                }
                $('#panda').fadeTo('slow', 0.1, function() {
                    $(this).css('background-image', 'url(images/rain.jpg)');
                }).fadeTo('slow', 1.4);
                playing = "storm";
                fade(storm);
                break;
        }
        console.log(playing);
    });

我“想”和我这么说主要是因为我是一名设计师，但这是一个值得关注的问题

$(this).css('background-image', 'url(images/rain.jpg)');

或者任何类型的声音，正如你所看到的代码只是倍数

现在基本上当你从一个背景切换到另一个背景时，它不会第一次平滑地加载背景图像，有没有其他方法可以平滑地加载？那么预加载.css更改？我不知道，对不起，我不太清楚这是怎么回事

---

非常感谢您的建议。建议之类的

您可以尝试在html中预加载图像，这样当它们成为背景图像时，它们将在缓存中。我的意思是：

把这个div放在标签的开头

<div class="preload">
    <img src="css/images/path-to-your-img.jpg" alt="">

    <img src="css/images/path-to-your-img.jpg" alt="">

    <img src="css/images/path-to-your-img.jpg" alt="">

    <img src="css/images/path-to-your-img.jpg" alt="">
</div><!-- /.preload -->

---

这是众多预加载img的方法之一，因此是您的选择。Personaly我将Html和CSS置于js之上，我已对您的代码进行了一些修改以预加载图像。让我知道这是否对您有效：）

---

可能是重复的，但我不太理解他们的答案，我有点理解这对多个div是如何工作的，但我正在用不同的背景图像更改同一个divID？一个简单的方法就是在页面中包含这个图像，宽度和高度=1，这样图像就可以切换了。无论如何，David Mulder链接的解决方案是最佳实践，但如果您没有足够的技能，只需在页面底部添加一个。感谢您的回答，我非常感谢您抽出时间更改背景图像。每一个选项都保持森林状态。不，一点错误都没有。我选择了一个简单的方法，它可能不是最好的方法，但我很感激你的时间，如果你能找到一个解决方案，而且这是一个更好的方法，我会考虑使用它。

.preload { opacity: 0; position: absolute; top: -9999px; left: -9999px; }

$(function() {
    var forest = document.getElementById("forest");
    var dusk = document.getElementById("dusk");
    var water = document.getElementById("water");
    var storm = document.getElementById("storm");
    var playing = "";
    var muted = false;
    // Preload Images
    var forestImg = new Image();
    var duskImg = new Image();
    var waterImg = new Image();
    var rainImg = new Image();
    forestImg.src="images/forest.jpg";
    duskImg.src="images/dusk.jpg";
    waterImg.src="images/water.jpg";
    rainImg.src="images/rain.jpg"; 



    $('#mute').on('click', function(e) {
      $('.icon').toggleClass("off"); 
      e.preventDefault();
    });

    $("#mute").click(function() {
        if(!muted) {
            forest.volume = 0;
            dusk.volume = 0;
            water.volume = 0;
            storm.volume = 0;
            muted = true;
        } else {
            forest.volume = 1;
            dusk.volume = 1;
            water.volume = 1;
            storm.volume = 1;
            muted = false;
        }
    });

    $('.sound').click(function() {
        switch($(this).find("audio").prop("id")) {
            case "forest":
                if(playing == "forest") {
                    fade(forest);
                    return;
                }
                $('#panda').fadeTo('slow', 0.1, function() {
                    $(this).css('background-image', forestImg.src);
                }).fadeTo('slow', 1.4);
                playing = "forest";
                fade(forest);
                break;
            case "dusk":
                if(playing == "dusk") {
                    fade(dusk);
                    return;
                }
                $('#panda').fadeTo('slow', 0.1, function() {
                    $(this).css('background-image', duskImg.src);
                }).fadeTo('slow', 1.4);
                playing = "dusk";
                fade(dusk);
                break;
            case "water":
                if(playing == "water") {
                    fade(water);
                    return;
                }
                $('#panda').fadeTo('slow', 0.1, function() {
                    $(this).css('background-image', waterImg.src);
                }).fadeTo('slow', 1.4);
                playing = "water";
                fade(water);
                break;
            case "storm":
                if(playing == "storm") {
                    fade(storm);
                    return;
                }
                $('#panda').fadeTo('slow', 0.1, function() {
                    $(this).css('background-image', rainImg.src);
                }).fadeTo('slow', 1.4);
                playing = "storm";
                fade(storm);
                break;
        }
        console.log(playing);
    });

});