如何防止背景图片在更改时闪烁

15 浏览
0 Comments

如何防止背景图片在更改时闪烁

我正在通过JavaScript将一个canvas上的重复背景图像应用到一个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，所以不需要下载。

解决方案：

// 创建一个新的Image对象
var img_tag = new Image();
// 当预加载完成时，将图像应用到div上
img_tag.onload = function() {
    document.querySelector('#div').style.backgroundImage = 'url(' + img + ')';
}
// 设置'src'实际上开始了预加载
img_tag.src = img;

0