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

我有一个图片框架，当用户拖动框架时，图片框会不断快速地更改图片。这些图像是基于用户的交互而实时生成的，因此应该尽快下载每个生成的图像。最高速度可能是每秒5张图像。但是，使用Safari/Chrome时，我有图像闪烁问题。 Firefox上没有这样的问题。每次图像更改时，服务器都会为浏览器提供一个新链接来下载新图像。当Javascript检测到图像完全下载时，图像帧将替换为新图像。我用来检测下载完整性的代码如下所示。基于WebKit的浏览器（Safari/Chrome）上的背景图片闪烁

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视频上记录了这个问题，希望有人能够理解我的问题并帮助我。如果我错过了一些重要的信息来帮助解决问题，请指出。谢谢！

来源

2010-10-14 yuhsinshih

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

来源

2010-10-26 20:56:27 Mark

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

回答

相关问题