0

我一直试图在我的 Tumblr 主题上获得一个有效的“刷新随机背景”。对于那些不知道的人，Tumblr 主题是由嵌入了 CSS 和 JavaScript 的 HTML 组成的。

现在，我正在使用这个脚本：

<script type="text/javascript">
        var bg1 = 'http://i.imgur.com/image1.jpg';
        var bg2 = 'http://i.imgur.com/image2.jpg';
        var bg3 = 'http://i.imgur.com/image3.jpg';
        var bg4 = 'http://i.imgur.com/image4.jpg';
        var bg5 = 'http://i.imgur.com/image5.jpg';

        var randBG=[bg1,bg2,bg3,bg4,bg5];

        window.onload=function() {
           num=Math.floor(Math.random()*randBG.length);
           document.body.style.background='url('+randBG[num]+') no-repeat center center fixed';
</script>

它可以工作，但会导致屏幕闪烁并使我的“背景尺寸：封面”属性无效。我已经尝试过图像预加载，但没有成功。Tumblr 不支持 php，而且我没有办法托管要链接的 php 文件。

所以，有两件事。如何在没有屏幕闪烁的情况下在刷新时随机化背景，并在此过程中保持以下 CSS 属性？

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
4

1 回答 1

0

首先，闪烁取决于预取和背景图像的大小。因此，如果背景图像很大，它不会与文档同时准备好。其次，在load事件上调用它意味着您要等到所有内容都加载到屏幕上后再加载背景，因此，您正在增加延迟。第三，就像我在评论中所说的那样，您background-size在 Javascript 中大吃一惊，因此您需要以不同的方式进行操作。

这就是我所做的。

CSS 片段

<style>
...
body {
  background: url('') no-repeat center center fixed;
  -moz-background-size: cover;
  background-size: cover;
}
...
</style>

Javascript

<script type="text/javascript">
    $(document).ready(function(){
        var bg1 = 'http://i.imgur.com/enkkn.jpg';
        var bg2 = 'http://i.imgur.com/BZBke.jpg';
        var bg3 = 'http://i.imgur.com/QOvQH.jpg';
        var bgs = [bg1, bg2, bg3];
        var num = Math.floor(Math.random() * bgs.length);
        var bg = new Image();
        bg.src = bgs[num];
        $(bg).load(function(){
            document.body.style.backgroundImage = "url(" + this.src + ")";
        });
    });
</script>

注意：这些背景图像实际上很大，我不建议使用那么大的东西。保持它们压缩和小，以便它们加载更快。

我使用了 jQuery，因为它能够在$(document).ready事件触发时立即运行某些东西，这意味着它会在文档在后台准备好时立即触发。我也等到图像实际加载以供使用，然后才将其备份为背景图像。我不相信你能完全消除闪烁，但我认为这会有所帮助。

于 2012-08-04T00:32:51.227 回答