변경 시 배경 이미지가 깜박이는 것을 방지하는 방법

Question

다음과 같이 JavaScript를 통해 캔버스의 반복되는 배경 이미지를 div에 적용했습니다.

으아아아

자주 업데이트해야겠어요. 문제는 변경 시 깜박거리는 현상인데 Chrome에서는 발생하지 않는 것 같지만 Firefox 및 Safari에서는 정말 나쁩니다. 이것을 방지하는 것이 가능합니까? 나는 이것이 dataurl이므로 다운로드할 필요가 없기 때문에 이런 일이 발생하지 않는다고 생각합니다.

해결책:

으아아아

Answer 1

이와 같은 이미지를 미리 로드하면 포함할 필요가 없습니다. 和 display: none

으아아아

Answer 2

다음 HTML 코드와 같이 DOM에 이미지를 포함시켜 이미지 리소스를 기기 저장소에 미리 로드해 보세요. 이미지 리소스를 로드해야 하는데 시간이 좀 걸리기 때문에(깜박임) 오류가 발생할 수 있습니다.

으아아아

sprites-images를 사용하는 것이 더 좋을 수도 있습니다. 스프라이트를 사용하면 애플리케이션에서 페이지에 모든 리소스를 로드하는 데 더 적은 HTTP 요청이 필요합니다. css 动画를 사용하는 경우 다음 CSS 스타일도 추가하세요. 모바일 장치에서 배경 깜박임을 방지합니다:

으아아아