이미지 사전로드를 처리하는 가장 좋은 방법

Question

그래서 저는 pinterest와 마찬가지로 무한 피드를 많이 사용하는 응용 프로그램을 작성하고 있습니다. 각 카드에는 이미지가 연관되어 있으며 가능한 한 빨리 무한 스크롤을 할 수있는 옵션을 모색 중입니다.

기술 분야에서는 backbone.marionette, isotope 및 imagesLoaded을 사용합니다.

내 구현 흐름은 다음과 같이 진행됩니다

1. 캐치 공급 onscroll 이벤트를
2. 페이지 X 퍼센트 스크롤, 화재 정의 특정 카드
3. 만들기 아약스 요청이
4. 을 설정
infinitescroll 이벤트를 초과하면 반환 된 데이터 배열의 각 객체를 기반으로 Marionette.ItemView 카드 및 관련 모델을 만듭니다.
5. 각 뷰를 피드에 추가합니다. 세트에서 각각의 뷰까지 hidden 상태
6. 기다림에 Marionette.CollectionView는 imagesLoaded 이벤트에 Marionette.CollectionView
7. 에 Marionette.CollectionView
8. 등록 imagesLoaded 리스너에 추가 동위체 그리드를 새로 고침 fadeInhiddenItemViews

되었습니다 병목 목은 Amazon S3 서버에서 카드의 모든 이미지를 다운로드 한 후 imagesLoaded 이벤트가 시작되기를 기다리고 있습니다. 내가 생각할 수있는 하나의 주요 최적화는 이미지 미리로드입니다.

나는 다음 세트의 AWS URL을 알아낼 수 있으므로 이미지를 미리 다운로드하고 각각의 카드에 대해 <img> 요소를 만들 수 있음을 이해합니다.하지만 실제로 어떤 일이 일어나는지 약간은 애매합니다. 이미지 캐싱과의 관계, 이것이 구현할 가장 좋은 방법인지 여부

모든 의견이나 조언을 부탁드립니다.

Answer 1

나는 당신이 결국 무엇을 이루려고하는지 잘 모르겠습니다. 이미지를로드 한 후 가능한 빨리 피드를 표시하고 싶다면 가장 쉬운 방법은 imagesLoaded를 사용하지 않고 ItemView에서 'load'이벤트를 수신하는 것입니다. 이벤트 : { "load img": "onImageLoaded"}. 당신이 컬렉션보기에서 잡을 필요에 따라 또는 더 가능성 :

triggers: {"load img" : "image:loaded" } 

을하지만, 당신이 이미지가 후에 만 ​​카드를 제시 할 경우, 가장 쉬운 방법은 이미지를 프리 페치하는 것 :

 
img = new Image() 
img.onload = function() { /*create the view*/ }; 
img.src = "s3 url";