Question

jquery随机更换网页背景

$(document).ready(function(){
$("body").css({"background":"url(images/body0_2.png)"+" repeat-x"+" top"+" center"+" #f7faff"});
$("#skin").click(function(){
var num = Math.floor(Math.random() * 284 + 1);
$("body").css({"background":"url(image/body_"+num+".png)"+" no-repeat"+" top"+" center"+" #fff"});
$("#sk").css({"opacity":".5"});
});
});
当我点击#skin的时候 背景会出现空白，要5-6秒才会出现新的背景图像。
怎样实现背景图像加载完成才执行css
最好可以存入cookies

Answer 1

<script>
$(document).ready(function(){
$("body").css({"background":"url(images/body0_2.png)"+" repeat-x"+" top"+" center"+" #f7faff"});
$("#skin").click(function(){
var num = Math.floor(Math.random() * 284 + 1);
perloadBG(num);
});
});
function perloadBG(n) {
    var img = new Image();
    img.src = 'images/body_' + n;
    img.onload = function () {
        $("body").css({"background":"url(image/body_"+ n +".png)"+" no-repeat"+" top"+" center"+" #fff"});
        $("#sk").css({"opacity":".5"});
    };
}
</script>

以上是给你的一个思路，可以在执行perloadBG的时候增加loading提示等等，抛砖引玉吧。

追问

我有另一个思路，但是我不会写。
在body里面嵌套一个...
先给.body设定一个背景样式
在点击#skin的时候 把.body的样式给body
然后再给.body设定一个新的值
这样在.body新的背景加载出来之前 body还是会显示之前的图片
等.body加载出来之后直接覆盖住body的背景

追答

如果你单纯实现更换页面背景，建议使用切换stylesheet（css）的方法；抑或在载入页面前一次性预载所有的背景图片。

追问

背景图片太多 且尺寸较大 不方便一次性载入 stylesheet我没用过 能写详细一点吗

追答

通常很少有随机200+背景的。。。

<link rel="stylesheet" href="styles/tmpl-1.css" title="theme" media="screen"/>
<script>
function switchStyle(styleName){    
    $("link[rel*=style][title=theme]").attr("href", styleName);
}   
</script>

大多情况下都是这样实现。