jQuery 이미지 게 으 름 로드 lazyload.js 사용 방법 깊이 연구

lazyload 는 자바 script 으로 작 성 된 jQuery 플러그 인 입 니 다.긴 페이지 의 그림 을 불 러 오 는 것 을 지연 시 킬 수 있 습 니 다.브 라 우 저 시각 영역 밖의 그림 은 사용자 가 있 는 위치 로 스크롤 할 때 까지 불 러 오지 않 습 니 다.
boottstrap 과 마찬가지 로 lazyload.js 도 jQuery 에 의존 합 니 다.

<script src="resources/js/jquery-1.8.3.min.js"></script>
<script src="resources/js/jquery.lazyload.min.js"></script>

이전 그림 도입 경로 와 달리 실제 그림 경 로 는 src 속성 이 아니 라 data-original 입 니 다.src 속성 은 자리 표시 자 그림 을 도입 하 는 데 사 용 됩 니 다.또한,img 의 너비 와 높이 를 설정 하여 게 으 른 그림 마다 class,예 를 들 어 lazy 를 추가 해 야 합 니 다.
4 대 속성 을 동시에 갖 춰 야 합 니 다:class   data-original   width  height<img class="lazy" width="640" height="480" data-original="resources/images/2.jpg">모든 class 가 lazy 의 그림 을 게 으 르 게 불 러 오 려 면 간단 한 코드 만 있 으 면 됩 니 다.

<script src="resources/js/jquery-1.8.3.min.js"></script>
<script src="resources/js/jquery.lazyload.min.js"></script>
<script>
 $('img.lazy').lazyload( );
</script>
</body>
</html>

임계 점 설정
기본적으로 그림 은 표시 영역 에 나타 날 때 만 불 러 옵 니 다.그림 을 미리 불 러 오 려 면 threshold 옵션 을 설정 할 수 있 습 니 다.예 를 들 어 thredshold 를 200 으로 설정 하여 그림 을 표시 영역 200 px 에서 미리 불 러 올 수 있 습 니 다.

$('img.lazy').lazyload({
 threshold:200,
});

자리 표시 자 설정
앞에서 언급 한 바 와 같이,img 탭 의 src 속성 으로 그림 을 도입 할 수 있 습 니 다.예 를 들 어 loading.gif 는 표시 되 지 않 은 영역의 불 러 올 그림 을 대체 할 수 있 습 니 다.우 리 는 placeholder 옵션 을 추가 하여 실현 할 수 있 습 니 다.

$('img.lazy').lazyload({
 placeholder:'resources/images/loading.gif'
});

이벤트 설정 으로 불 러 오기
클릭,mouseover 와 같은 jQuery 이벤트 도 사용 할 수 있 고 사용자 정의 이벤트 도 사용 할 수 있 습 니 다.기본적으로 사용자 가 아래로 스크롤 하고 그림 이 표시 영역 에 나타 날 때 까지 기 다 려 야 합 니 다.예 를 들 어 사용자 가 클릭 할 때 만 그림 을 불 러 옵 니 다.

$('img.lazy').lazyload({
 event:'click'
});

특수 효 과 를 사용 하 다
기본적으로 플러그 인 은 그림 이 완전히 불 러 오 기 를 기다 리 고 show()방법 으로 그림 을 표시 합 니 다.예 를 들 어 fadeIn 같은 특수 효 과 를 사용 할 수 있 습 니 다.

$('img.lazy').lazyload({
 effect:'fadeIn'
});

그림 은 용기 안에 있다.
스크롤 바 가 있 는 DIV 요 소 는 용기 에서 스크롤 할 수 있 는 그림 에 사용 할 수 있 습 니 다.예 를 들 어 스크롤 바 가 있 는 DIV 요 소 는 용 기 를 jQuery 대상 으로 정의 하고 초기 화 방법 으로 매개 변수 로 전달 해 야 합 니 다.예 를 들 어 수직 스크롤

#container {
 height: 600px;
 overflow: scroll;
}

<img class="lazy" data-original="img/example.jpg" width="765" height="574">

$("img.lazy").lazyload({  
 effect : "fadeIn",
 container: $("#container")
});

그림 이 순서대로 배열 되 지 않 을 때
페이지 를 스크롤 할 때 Lazy Load 는 그림 을 반복 해서 불 러 옵 니 다.그림 이 보 이 는 영역 에 있 는 지 순환 중 에 확인 합 니 다.기본적으로 보 이 는 영역 에 없 는 첫 번 째 그림 을 찾 을 때 순환 을 멈 춥 니 다.그림 은 스 트림 분포 로 여 겨 집 니 다.그림 은 페이지 의 순서 와 HTML 코드 에서 순서 가 같 습 니 다.그러나 일부 레이아웃 에 서 는...이러한 가설 은 성립 되 지 않 습 니 다.그러나 failuremit 옵션 을 통 해 로드 행 위 를 제어 할 수 있 습 니 다.

$("img.lazy").lazyload({ 
 failure_limit : 10
});

failuremit 을 10 개의 플러그 인 으로 설정 하여 보이 지 않 는 영역 에 있 는 10 개의 그림 을 찾 아야 검색 을 중단 합 니 다.만약 찌 질 한 레이아웃 이 있다 면 이 매개 변 수 를 좀 높 게 설정 하 십시오.
숨겨 진 그림 불 러 오기
페이지 에 숨 길 수 있 는 그림 이 많이 묻 혀 있 을 수도 있 습 니 다.예 를 들 어 플러그 인 은 목록 에 있 는 항목 의 표시 상 태 를 계속 수정 할 수 있 습 니 다.성능 향상 을 위해 레이 지 로드 는 기본적으로 숨 긴 그림 을 무시 합 니 다.숨 긴 그림 을 불 러 오 려 면 skipinvisible 을 false 로 설정

$("img.lazy").lazyload({ 
 skip_invisible : false
});

이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 십시오.저희 에 대한 지지 에 감 사 드 립 니 다!