2012-06-02 4 views
0

저는 브라우저 뷰포트가 다양한 그래픽 환경을 보여주기 위해 이동하는 '대화 형 세계'스타일의 경험에 기반하여 계획하고있는 프로젝트를 가지고 있습니다. 모두 유동적이고 페이지 간 휴식이 없어야합니다. 이 프로젝트는 JS/HTML5/CSS3브라우저 렌더링 엔진 : 거대한 이미지 배경에 가장 적합한 전략

이 전체 '세계'(그것은 또한 회전하고 그 위에 다양한 PNG 알파 오버레이가)

아마도 8-15,000 픽셀의 제곱이 될 것입니다 포즈 문제입니다

몇 가지 테스트를 실시하려고했지만이 방법에 접근 할 수있는 방법이 너무 많아서 가장 유동적 인 방법을 찾고 있습니다. 브라우저 렌더링 엔진의 내부 동작에 대한 지식은별로 좋지 않아서 물어볼 것입니다.

Google지도에서 사용하는 '타일링'방식은 사용할 수 없습니다 (너무 고르지 않음). 너무 두꺼워서 두통이 생길 때 수학적 변환을 수행하여 어떤 각도에서로드할지 결정해야합니다. 나는 여기에 내려 삶은 한이 선택 사항은 다음과 같습니다

(1) "거대한"이미지 접근 enter image description here

이것의 장점은 모든 것을 쉽게 장전되면, 단점이 일어나고 있다는 점이다 거대한 수 및 이미지 큐가 본질적으로 2 이미지 (오버레이 및 거대한 img) 될 증분 preloader를 표시 할 수 없습니다

: 15,

2 분할 영상

enter image description here

을 이점은 I가 10 개 % 씩 (10 개 배 이미지)

질문에 화상 큐 프리 로더를 보여줄 수 있다는 두 번째 접근법은 9 개의 별도 계산 집합이 있기 때문에 브라우저의 렌더링 엔진에 더 많은 고통을 줄 것입니다. 브라우저 엔진은 일단 ini가되면 해당 영역을 하나의 칠한 영역으로 간주합니다 렌더링되고 전체적으로 업데이트됩니까? 또는 dom이 변경 (매번 회전) 될 때마다 브라우저는 동일한 변환/다시 칠 프로세스를 9 번 실행해야합니까?

대단히 감사합니다.

답변

0

나중에 많은 테스트 : 결과 : 큰 이미지를 사용하면 브라우저에서 처리 할 수 ​​없을 것으로 보입니다.

관련 문제