基于 WebKit 的浏览器 (Safari/Chrome) 上的背景图像闪烁答案

【问题标题】：Background Image Flickers on WebKit-based browsers (Safari/Chrome)基于 WebKit 的浏览器 (Safari/Chrome) 上的背景图像闪烁
【发布时间】：2012-08-18 15:22:41
【问题描述】：

我有一个图像框架，当用户在框架上拖动时，它会不断快速地更改图像。这些图像是根据用户的交互实时生成的，因此生成的每个图像都应在可用时立即下载。最高速度可以是每秒 5 张图像。但是，我在使用 Safari/Chrome 时遇到了图像闪烁问题。火狐没有这样的问题。每次更改图像时，服务器都会为浏览器提供一个新链接以下载新图像。当 Javascript 检测到图像已完全下载时，图像框架将替换为新图像。我用来检测下载完整性的代码如下所示。

SImage = function(callback) // Define an image class with callback function
{
    var _this = this;
    var appname = navigator.appName.toLowerCase();
    _this.img = new Image();

    _this.get = function(url, answer){
        if (appname.indexOf("netscape") == -1){ // for IE
            _this.img.onreadystatechange = function () {
                if (_this.img.readyState == "complete"){
                    callback(_this.img.src);
                }
            };
        } else {    //other browsers, firefox, safari, chrome
            _this.img.onload = function () {
                if (_this.img.complete){
                    callback(_this.img.src);
                }
            };
        }       
        _this.img.src = url;
    }
};

我使用 jquery 来改变图像背景。

$('#layer_img').css('background-image', 'url("'+pviewImg.img.src+'")');

layer_img 是一个，pviewImg 是一个 SImage 类。

我也在youtube视频中记录了这个问题，希望有人能理解我的问题并帮助我。如果我错过了一些有助于解决问题的重要信息，请指出。谢谢！

【问题讨论】：

标签： jquery safari background-image

【解决方案1】：

即使使用-webkit-perspective: 1000 和-webkit-backface-visibilty: hidden;，我也注意到大型JPG 上的类似问题我也尝试过-webkit-transform: translate3d(0,0,0); 仅在图像上闪烁。

【讨论】：