Question

我一直试图在我的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>

它可以工作，但它会导致屏幕闪烁并使我的“background-size：cover”属性无效。我尝试过图像预加载，没有成功。 Tumblr不支持php，我也没有办法托管一个php文件来链接。

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

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

Answer 1

首先，闪烁取决于预取和背景图像的大小。因此，如果背景图像是巨大的，它将不会与文档同时准备好。其次，在load事件上调用此方法意味着您要等到所有内容都加载到屏幕上才能加载背景，因此，您正在加快延迟。第三，就像我在评论中所说的那样，你在Javascript中吹走了background-size，所以你需要以不同的方式去做。

这就是我的所作所为。

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事件触发后立即运行，这意味着它会在文档在后台准备就绪时立即触发。我也等到图像实际加载使用，然后才将它备份为背景图像。我不相信你能完全消除闪烁，但我认为这会有所帮助。

刷新闪烁的随机背景（Tumblr）

1 个答案: