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>

動作しますが、画面がちらつき、「background-size：cover」プロパティが無効になります。画像のプリロードを試しましたが、成功しませんでした。Tumblrはphpをサポートしておらず、リンクするphpファイルをホストする方法がありません。

だから、2つのこと。画面のちらつきなしに更新時に背景をランダム化し、その過程で次のCSSプロパティを維持するにはどうすればよいですか？

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

1 に答える 1

0

まず、ちらつきはプリフェッチと背景画像のサイズに依存します。したがって、背景画像が巨大な場合、ドキュメントと同時に準備することはできません。次に、これを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>

注：これらの背景画像は実際には巨大であり、それほど大きなものを使用することはお勧めしません。それらを圧縮して小さくして、ロードが速くなるようにします。

$(document).readyjQueryを使用したのは、イベントが発生するとすぐに何かを実行できるためです。つまり、ドキュメントがバックグラウンドで準備ができたらすぐに発生します。また、画像が実際に読み込まれて使用できるようになるまで待ってから、背景画像に戻します。ちらつきを完全になくすことができるとは思いませんが、これは役立つと思います。

于 2012-08-04T00:32:51.227 に答える