在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中閃爍背景圖片

回答

相關問題