web-dev-qa-db-ja.com

変更時に背景画像がちらつくのを防ぐ方法

次のように、JavaScriptを介してキャンバスから繰り返し背景画像をdivに適用しています。

var img_canvas = document.createElement('canvas');

img_canvas.width = 16;

img_canvas.height = 16;

img_canvas.getContext('2d').drawImage(canvas, 0, 0, 16, 16);

var img = img_canvas.toDataURL("image/png");

document.querySelector('#div').style.backgroundImage = 'url(' + img + ')';

かなり頻繁に更新しなければなりません。問題は、変更時にちらつき、Chromeでは発生しないようですが、FirefoxとSafariでは本当に悪いです。これを停止することはできますか？発生するとは思いませんでした。それはdataurlなので、ダウンロードする必要がないからです。

ソリューション：

// create a new Image object
var img_tag = new Image();

// when preload is complete, apply the image to the div
img_tag.onload = function() {

    document.querySelector('#div').style.backgroundImage = 'url(' + img + ')';
}

// setting 'src' actually starts the preload
img_tag.src = img;
javascripthtmlcssimage
22
Suffick

次のHTMLコードのように画像をDOMに含めることで、画像リソースをデバイスストレージにプリロードしてみてください。画像リソースをロードする必要があるため、エラーが発生する可能性があります。

<img src="imageToPreload.png" style="display:none;" alt="" />

sprites-images を使用することをお勧めします。スプライトを使用することで、アプリケーションはすべてのリソースをページにロードするために必要なHTTPリクエストが少なくなります。 css animationsを使用している場合は、次のCSSスタイルも追加します。モバイルデバイスの背景のちらつきを防止します。

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;
17
lin

このCSSをバックグラウンド要素に追加してみてください：

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

それはちらつきを助けるはずです。

これをバックグラウンド要素に追加して、ハードウェアアクセラレーションを「強制」することもできます。

-webkit-transform: translate3d(0, 0, 0);

別のオプションは、DIVの代わりに画像を使用して、画像のURLのみを変更することです。

6
Hardy

このように画像をプリロードします。<img>にdisplay: noneを含める必要はありません

<link rel="preload" href="/images/bg-min.png" as="image">
2
sudokai

私はこれに少し苦労しました、プリロード、ドキュメントへの画像の追加などを試みました。

最後に、私は「プログレッシブ」なしでJPEGを再保存しましたオプション。

これにより、img srcが交換されたときにローリングフリッカーが修正されました。

1
mustacheMcGee

私の場合、height: 1080px;（背景の高さ）からheight: fit-content;

0
Ben Parry