div에서 깜박이는 배경 이미지

asp.net을 사용하고 있습니다.div에서 깜박이는 배경 이미지

자바 스크립트를 사용하여 클라이언트에 이미지를 캐싱하고 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>

자바 스크립트

<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에서 발생했습니다. –