1

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.

David Mulder
  • 26,123
  • 9
  • 51
  • 114
HeyImArt
  • 498
  • 3
  • 9
  • 24
  • possible duplicate of [Preload background images with jQuery?](http://stackoverflow.com/questions/9379855/preload-background-images-with-jquery) – David Mulder Oct 10 '14 at 14:58
  • Possibly, but I don't quite understand their answers, I kind of understand how that may work for multiple divs but I'm altering the same divID with different background-image? – HeyImArt Oct 10 '14 at 15:02
  • A simple way it's just to include this image in the page with width and height = 1, so the image will be ready for the switch. Anyway the solution linked by David Mulder it's the best practice, but if you don't have enough skill just add a on bottom of your page. – MrPk Oct 10 '14 at 15:05

2 Answers2

3

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

SplasHmdfc
  • 46
  • 1
0

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

});
Bojan Petkovski
  • 6,835
  • 1
  • 25
  • 34
  • Thank you for your answer, I really appreciate the time but it doesn't seam to change the background-image. It's staying as the forest one for every option. – HeyImArt Oct 10 '14 at 15:20
  • No, no errors at all. It just doesn't change the background-image css it seams. – HeyImArt Oct 10 '14 at 15:32
  • I have gone for a simple method, it may not be the best method but I appreciate your time, if you come to a solution and it's a better method I would think about using it. – HeyImArt Oct 10 '14 at 15:39