2011-12-01 1 views
0

내 사이트에서 스프라이트 애니메이션 (부활절 달걀)을 만들고 있습니다. Mozilla에서 잘 작동합니다. 하지만 Chrome에서는 작동하지 않습니다. 문제는 매번 $ ("img"). attr ('src', 'new_path')를 다운로드 할 때마다 (캐시가 아닌) 새로운 이미지를 다운로드하는 것입니다. 어떻게 해결할까요?크롬에서의 JS 스프라이트 애니메이션

Mozilla에서 열고 "holycow"라고 입력하면 어떻게 작동하는지 확인할 수 있습니다. 그런 다음 Chrome에서 엽니 다.

http://html5.maniac.mn/

자바 스크립트 : http://html5.maniac.mn/js/liukang.js

답변

1

당신은 이것에 대해 선생님을 잘못된 방향으로 가고 있습니다. 스프라이트 시트를 만들고 배경 위치를 오프셋해야합니다. 그렇지 않으면 하나 이상의 브라우저에서 깜박 거립니다. 예제가 필요하다면이 답변을 업데이트 할 수 있습니다.

여기에 행동이의 샘플입니다 :

http://www.wrightonwrong.com/

가져가 침체 스틱 그림 사람 이상. js 소스 및 이미지 자산을보고 내가 여기에서 어떻게했는지 확인할 수 있습니다. 여기

약간 더 정교한 버전 : http://www.innercirclestyles.com/

+0

당신은 하나 개의 이미지에 있어야합니다 하나 개의 동작에서 모든 이미지를 의미? – Gereltod

+0

기본적으로. 요구 사항은 아니지만 성능면에서는 분명 좋습니다. 애니메이션의 모든 프레임을 한 줄에, 이상적으로는 같은 간격으로 배치 한 이미지를 만들고 그 이미지를 요소의 배경으로 설정하십시오. img src를 업데이트하는 대신 포함하는 요소의 배경 위치를 업데이트하십시오. –

+0

나는 당신의 제안을 거의 이해했다. 그게 내가 프리 로더를 사용한 이유입니다. /js/liukang.js 파일의 맨 아래 부분을 보면 함수가 이미지를 생성합니다. Chrome에서 해당 이미지를 사용할 것으로 생각했습니다. – Gereltod