在div中闪烁背景图片

我在客户端使用JavaScript缓存图像，每隔300毫秒加载一个图像。在Chrome上没有问题。在IE9 + 10上我收到闪烁。我想如果缓存图像第一我会避免闪烁？

我也试过使用2个div。 1隐藏并加载下一帧，第二个div显示第一个div（加载后）的背景图像，但仍然闪烁。

真的很困惑......

我的代码：

HTML

<a href="#" title="Play Motion Clip from Beginning"> 
<img alt="Play Motion" src="../Images/play_green_controls.png" style="border-style: none; width: 32px; height: 32px; background-color: #000000; cursor: pointer;" 
      id="btnPlay" /> 
</a> 
<div id="divImage" > 
hello andy 
</div>

的Javascript

<script type="text/javascript"> 
    var cache = []; 
    var cacheImage = document.createElement('img'); 
    var interval = 100; 
    var _total = 0; 

    $("#btnPlay").click(function() { 
     $.ajax({ 
      type: "POST", 
      url: "Default3.aspx/GetClips", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 
       cache = []; 
       _total = 0; 
       $.each(msg.d, function() { 
        var cacheImage = document.createElement('img'); 
        cacheImage.src = this['Text']; 
        cache[_total] = cacheImage; 
        _total++; 
       } 
       ); 
       setInterval('swapImages()', interval); 
      }, 
      error: function (msg) { 
       alert(msg.d); 
      } 
     }); 
    }); 
    var div = document.getElementById('divImage'); 
    var _index = 0; 
    function swapImages() { 

     if (_index < _total) {    
      if (_index > 0) { 
       div.removeChild(cache[_index - 1]); 
      }    
      div.appendChild(cache[_index]); 
     } 
     else { 
      interval = 0; 
     } 
     _index++; 
     if (_index == _total) 
     { 
      div.removeChild(cache[_index - 1]); 
      _index = 0; 
      div.appendChild(cache[_index]); 
     } 
    }

代码背后：

[WebMethod] 
    public static ArrayList GetClips() 
    { 
     ArrayList _arr = new ArrayList(); 
     int _max = 250; //seems to be safe 
     string[] _files = Directory.GetFiles(@"C:\Cloud\Catalogues\000EC902F17F\2\2013\10\6\10\f1fe61da-4684-48ed-a503-4a5586ece9c8","*.jpg"); //731 
      for (int _index = 0; _index < _files.Length; _index++) 
     { 
      string _file = _files[_index]; 
      string[] _bits = _file.Split('\\'); 
      string _url = "Portal/Catalogues/000EC902F17F/2/2013/10/6/10/f1fe61da-4684-48ed-a503-4a5586ece9c8/" + _bits[10]; 
      ListItem _item = new ListItem(); 
      _item.Text = _url; 
      _arr.Add(_item); 
      if (_index == _max - 1) 
      { 
       break; 
      } 
     } 
     return _arr; 
    }

来源

2013-10-12 Andrew Simpson

我可以看到你使用此代码的 –

@Vickey。 2秒.. –

@Vickey这是我最初使用的。我后来尝试使用div背景。闪烁发生在img和div上 –

如果有人有兴趣。我这样做：

我添加了一个隐藏的img控件。我将图像加载到了onload事件上，我调用了一个函数将img.src加载到div背景中。到目前为止似乎都可以工作。

来源

2013-10-12 18:48:50

在div中闪烁背景图片

回答

相关问题