WebView에서 애니메이션 GIF의 동작이 매우 이상합니다! 어떻게 해결할 수 있습니까?

Question

사용자가 스크롤 영역의 맨 아래에 접근 할 때 Ajax를 통해 Autoloads하는 게시물의 목록이 길어서 "Loading ..."이라는 단어를 표시하고 생성 된 옆에 애니메이션 GIF가있는 WebView가있는 응용 프로그램이 있습니다. Ajax Loader 사이트를 통해.

문제는이 Gif가 Androind 2.3.5/2.3.6을 사용하는 일부 기기에서는 정지 이미지로 표시되고 다른 기기에서는 애니메이션이 매우 빠르며 다른 기기에서는 매우 느립니다.

예. OS가 설치된 Galaxy S Mini : 2.3.6 (정지 이미지로 나타남)

OS가있는 Galaxy S I9003 : 2.3.6 (매우 빠른 속도로 재생됩니다).

OS가있는 Galaxy S2 : 4.0.3 (매우 빠르게 재생되고 갑자기 매우 느려지지만 여전히 애니메이션이 적용됩니다).

는 표준 프레임 속도 또는이 문제에 대한 주위에 일이 있습니까,

여기 내가 사용하는 이미지와?

------> < ---- ----

피드의 맨 아래에있는 로더에서 Facebook의 앱이 WebView를 사용하고 있었지만 애니메이션 gif인지 여부는 알 수 없습니다.

나는 안드로이드의 이전 버전 애니메이션 GIF를 지원하지 않았다는 것을 알고 있지만

Answer 1

나는 정확히 같은 문제가 있었다 어떠한 해결책을 찾을 수 없습니다 나는 새 버전에 대해서 이야기하고! 애니메이션 GIF 동작은 장치간에 실제로 일치하지 않는 것 같습니다. 그것은 나쁜 소식입니다. 좋은 소식은 내가 당신과 같은 ajax 로더를 위해 특별히 작업 한 것입니다.

GIF의 각 프레임마다 별도의 이미지 파일을 만들어야합니다. 그것은 끔찍한 소리가 나지만 괜찮아 - 내 8 프레임 8kb GIF는 11kb 총 8 PNG 이미지로 바뀌었고, 나는 배경색에 대해 걱정할 필요가 없도록 8 비트 투명도의 보너스를 받았습니다. 그것은 클라이언트가 별도의 이미지에 대한 추가 요청을해야한다는 것을 의미하므로 적은 수의 프레임이 더 좋습니다. 이미지를 0.png, 1.png ... 7.png이라고 부르며 폴더에 넣어서 깔끔하게 보관합니다.

이제 코드! 나는 그것을 아래에서 설명 할 것이다.

HTML : 우리는 우리가 애니메이션됩니다 img이

var loaderImg = $("#headLoader"); 
var loaderProg = 0; 
setInterval(function() { 
    $("#loaderKicker").html(loaderProg); 
    loaderImg.attr("src", "images/loader/"+loaderProg+".png"); 
    loaderProg = (loaderProg+1)%8; 
}, 300); 

첫째 :

<img src="images/loader/0.png" id="headLoader" /> 
<div id="loaderKicker" style="visibility:hidden;"></div> 

자바 스크립트 (jQuery를). setInterval을 사용하여 프레임을 순환하는 이미지 URL을 변경합니다. 정말로 짧은 간격으로 장치에 부하가 걸리므로 견과를 피우고 싶지는 않습니다. 나에게는 정말 싼 안드로이드 2.2 장치가 있고 200ms + 간격은 앱 성능을 엉망으로 만들지 않고 잘 작동하는 것 같다.

loaderKicker div는 이전 장치 (예 : 타겟팅하는 장치)에서이 작업을 수행 할 수 있습니다. :)). 안드로이드가 전화를 무시하는 것 같습니다 모두 우리는 이미지 URL을 업데이트하기 때문에 숨겨진 div의 내용을 업데이트함으로써이 문제를 해결할 수 있습니다. 나는 항상 "x"로 업데이트하려고했지만 내용이 실제로 달라야합니다.슬라이드 번호가 잘 작동합니다.

이제 끝났습니다. 해킹 일이지만, 테스트 한 모든 것 (안드로이드 2.2, 2.3, 4.0, iOS6, 파이어 폭스, 인터넷 익스플로러, 크롬)에서 작동하고, 한 아약스 로더에서만 작동한다면 어디서나 사용하는 것이 좋습니다.

완전히 다른 해결책은 HTML5 캔버스를 사용하여 이미지를 애니메이션으로 만드는 것이지만 이전 장치에서 지원하는 것에 대해서는 말할 수 없습니다.