Question

我有一个图像框，当用户拖过框架时，它会不断快速地改变图像。这些图像是基于用户交互生成的实时图像，因此生成的每个图像应在可用时立即下载。最高速度可以是每秒5个图像。但是，使用Safari / Chrome时出现图像闪烁问题。 Firefox上没有这样的问题。每次更改图像时，服务器都会为浏览器提供下载新图像的新链接。当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是a，pviewImg是一个SImage类。

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

Answer 1

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

背景图片在基于WebKit的浏览器上闪烁（Safari / Chrome）

1 个答案: