对不起，标题太模糊了，我不确定用简短标题来描述这个标题的最好方法。我的朋友一直在帮助我为自己开发这个简单的网站。它可以播放轻松自然的声音。
这是我朋友所做的代码，现在我会问他，但是他骑自行车穿越英国，将会离开很长一段时间..
$(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会改变吗？我不知道，抱歉，我不知道这是如何运作的。
非常感谢任何建议。建议或其他。
答案 0 :(得分：3)
您可以尝试在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答案 1 :(得分：0)
我对您的代码进行了一些修改以预加载图像。如果这对您有用，请告诉我:)）
$(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);
});
});