Question

对不起，标题太模糊了，我不确定用简短标题来描述这个标题的最好方法。我的朋友一直在帮助我为自己开发这个简单的网站。它可以播放轻松自然的声音。

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

$(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);
    });

我认为＆＃39;我说这主要是因为我是一名设计师，但这有点令人担忧。

$(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的众多方法之一，因此是您的选择。 Personaly我在js

上使用Html和CSS

Answer 2

我对您的代码进行了一些修改以预加载图像。如果这对您有用，请告诉我:)）

$(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);
    });

});

jQuery .css background-image preload

2 个答案: