Bagaimana untuk mengelakkan imej latar belakang daripada berkelip apabila menukar

Question

Saya menggunakan imej latar belakang berulang dari kanvas ke div melalui JavaScript seperti ini:

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 + ')';

Saya perlu mengemas kininya dengan kerap. Masalahnya ialah ia berkelip pada perubahan, yang nampaknya tidak berlaku dalam Chrome, tetapi benar-benar buruk dalam Firefox dan Safari. Adakah mungkin untuk mengelakkan ini? Saya tidak fikir ini berlaku kerana ia adalah dataurl dan oleh itu tidak perlu dimuat turun.

Penyelesaian:

// 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;

Answer 1

Pramuat gambar seperti ini, tidak perlu sertakan 和 display: none

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

Answer 2

Cuba pramuat sumber imej ke dalam storan peranti dengan memasukkan imej dalam DOM, seperti yang ditunjukkan dalam kod HTML berikut. Ralat mungkin berlaku kerana sumber imej perlu dimuatkan, yang mengambil sedikit masa (berkedip).

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

Anda mungkin lebih suka menggunakan sprites-images. Dengan menggunakan sprite, aplikasi anda memerlukan lebih sedikit permintaan HTTP untuk memuatkan semua sumber ke halaman anda. Jika anda menggunakan css 动画, sila tambah juga gaya CSS berikut. Ia akan menghalang latar belakang berkelip pada peranti mudah alih:

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