JavaScript : 수평 div의 게으른 부하 이미지?

Question

수평으로 수평 스크롤 바를 보여주는 썸네일이 많이있는 div가 있습니다. 이 썸네일을 게으른로드하고 사용자가 수평으로 스크롤되면 표시하는 방법이 있습니까? 내가 본 모든 예제는 div가 아닌 브라우저 창을 확인합니다.

이것은 컨테스트 항목을위한 것이므로 때로는 수백 개의 출품작이있어 성능에 큰 영향을 미칩니다.

미리 감사드립니다.

Answer 1

나는 게으른로드 플러그인 jQuery 및 컨테이너 Div에서 게으른로드 이미지에 대한 지원을 추가했습니다. 그만큼 게으른로드 플러그인 jQuery는 이제 이것을 직접 지원합니다. 필요한 경우 jQuery에 대한 의존성을 제거하거나 다른 라이브러리에 적응하는 것은 너무 어렵지 않아야합니다.

Github에서 내 포크 프로젝트를 얻을 수 있습니다. http://github.com/silentmatt/jquery_lazyload/tree/master.

이를 사용하려면 스크롤링 DIV 요소와 함께 "컨테이너"옵션을 추가해야한다는 점을 제외하고는 원본에서와 같이 이미지에서 Lazyload를 호출하십시오. 따라서 HTML이 다음과 같습니다.

<div id="container" style="width: 765px; overflow: scroll;">
    <img src="image1.jpg" width="765" height="574">
    <img src="image2.jpg" width="765" height="574">
    <img src="image3.jpg" width="765" height="574">
    ...
</div>

당신은 다음과 같이 lazyload라고 부릅니다.

$("#container img").lazyload({ container: $("#container") });

Answer 2

비슷한 문제가 발생한 내 질문을보십시오. Jason Bunting 청크에 이미지를로드하기 위해 편리한 작은 스크립트를 주었다. :

Preloader 및 여러 이미지로 로딩 상태를 표시하는 방법은 무엇입니까?