Jquery Lazy Load 플러그인을 사용하여 이미지가 브라우저의 뷰포트에있을 때 느리게로드합니다.크기가 작아도 크기가 작아도 img는 항상 800 * 400 픽셀 공간을 차지합니다.
원래 이미지 대신 애니메이션 로더 gif를 배치합니다. 그러나 애니메이션 로더의 치수에 차이가 있기 때문에 & 원본 이미지는 원래 이미지가 축소 된 것을 볼 수 있습니다.
원본 이미지를 배치했을 때 사용 된 전체 공간을 로더 gif에 보관하려고합니다. (로더 gif는 32 * 32 px & 원래 img는 800 * 400px입니다.) 그래서 아래 코드로 렌더링 된 이미지는 해당 크기까지 로더 이미지 크기 조정없이 항상 800 * 400px 공간을 차지해야합니다. 나는 그것이 CSS를 통해 가능하다고 생각하지만 어떻게 될지 모른다. 이걸 안내 해줄 수 있니?
<img class='lazy' data-original='/module_files/l.jpg' src='/loader.gif'/>
로더 이미지와 함께 CSS 배경을 사용하십시오. 그래서 Gerben
@ Gerben - 음, 나는이 생각을 좋아하고 그것은 나에게 발생하지 않았다. 실제 답변으로 게시해야합니다! src를 ''로 설정하면 bg 이미지가 표시됩니다. – mrtsherman
@Gerben - 일단 설정되면 src 속성을 제거하는 방법을 알 수 없습니다. 결국 당신의 해결책을 깨뜨린 것입니다. 그래도 이것을보고 싶어합니다! http://jsfiddle.net/uNbMN/5/ – mrtsherman