我通过 JavaScript 将重复的背景图像从画布应用到 div，如下所示：
2
1379var 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;
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
像这样预加载图像，无需包含
![]()
display: none