3

スクリプトタグ内の次のコードで背景画像を変更しています。背景が変わるとホワイトフラッシュが発生します。私のページはすべて ajax です。プロファイルページでもこれを使用しているため、背景のような背景色を選択することはできません。各プロファイルには異なる背景があります。

画像をプリロードしてから背景を変更してホワイトフラッシュを停止することは可能ですか? ありがとう

  $('body').css('background-image', 'url(../images/waves.jpg)');
  $('body').css('background-attachment', 'fixed');
  $('body').css('background-size', 'cover');
4

3 に答える 3

3

次のように、非表示の画像を読み込んで、画像の読み込みが完了したら変更することができます。

function preloadImage(source, destElem) {
    var image = new Image();

    image.src = source;

    image.onload = function () {
        var cssBackground = 'url(' + image.src + ')';

        $(destElem).css('background-image', cssBackground);
    };
}

使用法：

preloadImage('images/waves.jpg', 'body');

編集: コードを関数内にラップしました。

EDIT 2: これは、変更中のバックグラウンド フラッシュのない例です。http://jsbin.com/admmx/4/edit?html,css,js,output .

于 2013-10-06T15:08:16.617 に答える
1

Image() オブジェクトを使用して画像を前処理することができます。

var newImg = new Image();
newImg.src = "img2.jpg";
$('body').css('background-image', 'url('+ newImg.src +')');
于 2013-10-06T15:09:48.077 に答える
1

あなたに合うかどうかはわかりませんが、背景にはラッパーを使用し、コンテンツにはラッパーを使用します。そうすれば、ページの残りの部分をあまり気にせずに、背景の変化をアニメーション化できます。前もって画像を知っていれば、CSS クラスを使用してスムーズに変更できます。

<body>
<div id="bg-wrapper" style="position: absolute; left: 0; top: 0"></div>
<div id="content-wrapper"></div>
</body>

もちろん、ブラウザ ウィンドウのサイズを変更した後に確認するコードを記述します。

これがフィドルの例です

于 2013-10-06T15:16:50.367 に答える