jQuery .css background-image preload

Question

I'm sorry the title is so vague, I wasn't sure the best way to describe this in a short title. My friend has been helping me develop this simple site for myself. It's to play relaxing sounds of nature.

Here is the code my friend did, now I would ask him but he is away on a bike ride across Britain and will be gone for quite some time..

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

I 'think' and I say that mainly as I'm a designer, but this is the bit of concern.

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

Or any of the types of sounds, as you can see the code is just multiples.

Now basically when you switch from one background to another, it doesn't load the background image smoothly for the first time, is there anyway it can load smoothly? So preload that .css change? I don't know, sorry I'm not well informed on how this works.

Any advice is really appreciated. Recommendations or whatever.

Answer 1

You can try pre-loading the images in the html so when the time comes for them to become a background image they will be in the cache. Here is what i mean:

Put this div at the opening of the tag

<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 -->

then add this to your css:

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

This is one of the many ways to preload img's so its your choice. Personaly i preffer Html and CSS over js

Answer 2

I have made some modifications to your code to preload the images. Let me know if this works for you :)

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

});