次のように、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;
次の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;
このCSSをバックグラウンド要素に追加してみてください:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
それはちらつきを助けるはずです。
これをバックグラウンド要素に追加して、ハードウェアアクセラレーションを「強制」することもできます。
-webkit-transform: translate3d(0, 0, 0);
別のオプションは、DIVの代わりに画像を使用して、画像のURLのみを変更することです。
このように画像をプリロードします。<img>
にdisplay: none
を含める必要はありません
<link rel="preload" href="/images/bg-min.png" as="image">
私はこれに少し苦労しました、プリロード、ドキュメントへの画像の追加などを試みました。
最後に、私は「プログレッシブ」なしでJPEGを再保存しましたオプション。
これにより、img srcが交換されたときにローリングフリッカーが修正されました。
私の場合、height: 1080px;
(背景の高さ)からheight: fit-content;