我通过 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;
尝试通过将图像包含在 DOM 中来将图像资源预加载到设备存储中,如以下 HTML 代码所示。可能会出现错误,因为需要加载图像资源,这需要一些时间(闪烁)。
<img src="imageToPreload.png" style="display:none;" alt="" />
您可能更喜欢使用精灵图像 http://www.w3schools.com/css/css_image_sprites.asp。通过使用精灵,您的应用程序将需要更少的 HTTP 请求来将所有资源加载到页面中。如果您使用的是,还请添加以下 CSS 样式css animations
。它将防止移动设备上的背景闪烁:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)