이미지로드시 느린 스크롤

Question

고정 된 크기의 이미지 그리드를 보여주는 이미지 관리자가 있습니다. 미리보기 이미지는 비교적 작아서 실제로 작게 만들 수 없습니다. 게으른 로딩을 구현하고 디버깅 기능을 사용하여 보이는 영역에 이미지가 있는지 확인합니다. 이로 인해 내 이미지 관리자가 시작되는 속도가 빨라졌습니다. 그러나 새로운 이미지 배치가로드되는 동안 스크롤하면 스크롤이 매우 느려집니다. 이 문제를 해결하기 위해 또는 이미지로드를 최적화하는 방법이 있습니까?

편집 :

이미지의 새로운 배치가 오는 동안 스크롤을 방지 할 수있는 방법이 있나요? Youtube가 계속로드되는 동안 더 많은 댓글을 보려면 스크롤 할 때 Youtube가 계속 수신 거부되는 것과 같은 종류입니까?

Answer 1

모든 이미지를 한 번에로드하지 마십시오. 지연로드로 구현 한 것으로 보입니다. 온라인 사용자가 빠르게 스크롤하는 경향이 있음을 알고 있습니다.

내가 제안, 몇 여기 일 : 올바른 방법으로 게으른 로딩을 구현 먼저

1. 이 필수적이다. here is a list of few best techniques, make sure which works best for you.
2. 당신은 축소판 그러나 나는 단지 작은 크기를 지정 가정 충분한 상대적으로 작은되지 않은 것을 언급했다, 나는 다른 실제 이미지 다른 두 개의 폴더를 유지,이 지상에 덮여있는 희망 에 대한 Thumbnails 귀하의 호스팅 서버에.
3. 우리는 서버에 많은 양의 무거운 이미지를 업로드하지만, 클라이언트 엔드의 이미지 크기를 조정 한 다음 서버에 업로드하면 사본 1 부 실제 이미지 및 에 대한 또 다른 이미지 Thumbnails
4. 제품 이미지에 대해 이야기하는 경우 BMP 및 JPG보다 훨씬 뛰어나므로 PNG를 유지하십시오. 또한 당신은 https://tinypng.com/ 같은 온라인 도구 또는이가 내를 해결하기 위해 한 사촌, 당신의 문제를 해결하는 데 도움이 https://pngquant.org/

희망 같은 소프트웨어로 압축 할 수 있습니다.

--N Baua는

Answer 2

이 느린 스크롤 getBoundingClientRect 전화 나 때문 밝혀() 아직로드되는 일부 이미지가있는 동안 새로운 눈에 보이는 이미지를 찾습니다. 이로 인해 리플 로우가 발생하여 모든 것을 망 쳤습니다.

이미지가로드 될 때 getBoundingClientRect()가 호출되지 않도록 이미지를 일괄 적으로로드하도록 변경했습니다.