2013-03-18 3 views
0

내 페이지 중 하나에 많은 이미지가 통합되어 있으므로 Pinterest를 비교할 때 가장 좋은 방법이 될 것입니다. 특히 Chrome에서 스크롤하는 작업이 실제로 엉망이고 부드럽지 않은 것으로 나타났습니다. 더 부드러운 스크롤을 구현할 수있는 방법이 있습니까? 자바 스크립트를 통해이 작업을 수행할까요? 또는 CSS 속성입니까?많은 이미지가있는 웹 페이지에서 부드러운 스크롤을 얻으려면 어떻게해야합니까?

+0

이게 도움이 될지 모르겠지만 Paul Irish는 Wikipedia에서 버그를 수정하는 것에 관한 Breakpoint의 Episode 6 (다른 Ep. # 일 수도 있음)에서 이와 비슷한 내용을 다루었다고 생각합니다. – Dan

답변

2

대표자의 이유 스크롤이 부드럽고 때문에 몇 가지이다 :

  1. 이미지가 느리게로드됩니다. 빠른 서비스를 위해 서버 측에 cached 일 수도 있습니다.
  2. 이미지가 뷰포트와 충분히 멀리 떨어져 있으면 이미지가 지워집니다 (THRESHOLD 픽셀 아래로 있으면 y = 0의 이미지를 지워야합니다). 이렇게하면 메모리가 정리되고 더 부드러운 환경이 제공됩니다 (이는 iOS에서 UITableViewController이 작동하는 것과 유사합니다).

내 제안은 무엇인가요?

  1. 서버의 이미지를 캐시하십시오.
  2. 보기 포트에서 THRESHOLD 픽셀 떨어진 이미지를 지 웁니다.
  3. 지연로드 이미지.
  4. Use a good infinite scroll plugin.

P.S. - 크기가 큰 파일을 실제로 제공하는 경우 인터넷 연결 속도에 따라 느린 경험을하게됩니다.

+1

don ' '게으른로드'가 무엇인지 아는 것은 : http://en.wikipedia.org/wiki/Lazy_loading – DiscoInfiltrator

+0

@Vinay - 정확히이 기술은 무엇입니까? "보기 포트에서 멀리 떨어진 픽셀을 지우십시오." – Matt

+1

@Brian 나는 당신을 위해 그것을하는 라이브러리를 알고 있지 않다. (아마도 거기에 하나가 있고 당신이보기를 권장한다.)하지만 일반적인 개념은 윈도우의 스크롤 이벤트에 바인딩하는 것이다.) 그리고 나서 사용자가 THRESHOLD 픽셀 아래인지 여부를 캡처합니다. 그렇다면 첫 번째 X 이미지에 대한 뷰와 연관된 javascript 객체를 삭제합니다. 사용자가 위로 스크롤하려면 이미지를 다시 만들어야한다는 것을 의미합니다. 흠 ... 지금 생각하고있는 라이브러리를 만들 수도 있습니다. – Vinay

0

id 'js를 사용하여 브라우저의 보이는 영역에있는 모든 사진을로드하고 사용자가 아래로 스크롤하면 더 많은 사진을로드하는 것이 좋습니다. 처음부터 많은 그림이있을 때 스크롤이 실제로 안좋아집니다.

관련 문제