javascript - jQuery .css 背景图像预加载

Question

抱歉，标题太含糊了，我不确定用简短的标题描述它的最佳方式。我的 friend 一直在帮助我为自己开发这个简单的网站。这是为了播放放松的自然之声。

这是我 friend 做的代码，现在我想问他，但他正在骑自行车穿越英国，而且会离开很长一段时间。

$(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 更改？我不知道，抱歉，我不太了解这是如何工作的。

非常感谢任何建议。建议什么的。

Answer 1

您可以尝试在 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 -->

然后将其添加到您的 CSS 中:

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

这是预加载 img 的众多方法之一，因此您可以选择。我个人更喜欢 Html 和 CSS 而不是 js