2011-12-08 1 views
0

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'/> 
+1

로더 이미지와 함께 CSS 배경을 사용하십시오. 그래서 Gerben

+0

@ Gerben - 음, 나는이 생각을 좋아하고 그것은 나에게 발생하지 않았다. 실제 답변으로 게시해야합니다! src를 ''로 설정하면 bg 이미지가 표시됩니다. – mrtsherman

+0

@Gerben - 일단 설정되면 src 속성을 제거하는 방법을 알 수 없습니다. 결국 당신의 해결책을 깨뜨린 것입니다. 그래도 이것을보고 싶어합니다! http://jsfiddle.net/uNbMN/5/ – mrtsherman

답변

0

http://jsfiddle.net/uNbMN/1/

이이 문제를 해결하는 방법은 많이 있습니다 만, 단지 하나의 img 태그와 내가 아주 좋은 방법이라고 생각하지 않습니다 어떤 JS를 사용하여. 실제 치수를 설정하기 때문에 img 내부에 센터를 표시 할 수는 없습니다. 당신은 두 가지 클래스로 이런 것을 할 수 있습니다.

img.lazy { 
    height: 400px; 
    width: 800px; 
    border: 1px solid black; 
} 

img.loader { 
    height: auto; 
    width: auto; 
    /*You would have to account for loader dimensions here*/ 
    padding: 200px 400px 200px 400px; 
} 

이 작업을 정말로하고 싶다면 이미지에서 '로더'를 완전히 분리하고 별도의 요소에 배치하는 것이 좋습니다.

관련 문제