刷新闪烁时的随机背景(汤博乐）

Random Background on Refresh Flicker (Tumblr)

本文关键字：汤博乐 背景 随机 闪烁 刷新      更新时间：2023-09-26

我一直在尝试在我的汤博乐主题上获得一个有效的"刷新时的随机背景"。对于那些不知道的人来说，汤博乐主题是由嵌入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>

它有效，但它会导致屏幕闪烁，并使我的"背景大小：封面"属性无效。我尝试过图像预加载，但没有成功。汤博乐不支持php，我也没有办法托管要链接到的php文件。

所以，有两件事。如何在刷新时随机化背景而不出现屏幕闪烁，并在此过程中维护以下CSS属性

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

首先，闪烁取决于预取和背景图像的大小。因此，如果背景图像很大，它就不会与文档同时准备好。其次，在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事件触发后立即运行，也就是说，一旦文档在后台准备好，它就会触发。我也会等到图像真正加载使用，然后才将其作为背景图像。我不相信你能完全消除闪烁，但我认为这会有所帮助。

相关文章：