jQuery .css背景圖片預加載

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

我想'我主要是因爲我是一名設計師，但這是一個值得關注的問題。

$(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我preffer Html和CSS js

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

});