jquery 플러그인lazyload.js를 사용하여 Images_jquery 로딩을 지연시키는 방법

웹페이지가 매우 길고 사진이 많으면 사진을 다운로드하는 데 많은 시간이 걸리며 이는 전체 웹페이지의 로딩 속도에 영향을 미칩니다. 이 지연 로딩 플러그인은 필요한 내용을 로드합니다. 스크롤하는 사진을 기반으로 배경에서 사진을 다운로드하도록 요청하고 마지막으로 표시합니다. 이 플러그인을 통해 이미지를 표시해야 할 때만 다운로드할 수 있으므로 서버 부담이 줄어들고 페이지 로딩 속도가 향상됩니다.

Lazy Load 플러그인 원리

이미지 로딩을 중단하려면 대상 img 요소의 src 속성을 orginal 속성으로 수정하세요. 스크롤 상태를 감지한 후 웹 페이지의 가시 영역에 img의 src 속성을 복원한 후 이미지를 로드하여 버퍼링된 로딩 효과를 만듭니다. 코드 도입 방법:

코드 복사 코드는 다음과 같습니다.

그런데 현재 많은 자바스크립트 전문가들은 이 플러그인이 실제로 로딩을 느리게 하는 역할을 하지 못한다고 분석하고 있습니다. 이는 실제로 사실이며 공식적인 지침과 해결책이 제공되었습니다.

사실 그 이유는 새 버전의 브라우저에서는 Javascript로 제어되는 src 속성을 삭제하더라도 브라우저가 계속 이미지를 로드하기 때문입니다.

그럼 어떻게 해결해야 할까요? 사실 아주 간단합니다. HTML의 구조를 직접 수정하고, img 태그에 새 속성을 추가하고, src 속성의 값이 자리 표시자 이미지를 가리키도록 하고, data-original 속성을 추가하면 됩니다. 실제 이미지 주소입니다. 예:

코드 복사 코드는 다음과 같습니다.

물론 위 코드에서는 페이지의 모든 이미지를 지연 로드하지만 때로는 일부 이미지가 지연 로드되는 것을 원하지 않기 때문에 다음과 같이 할 수 있습니다.

예를 들어 메인 클래스 로딩 아래의 이미지만 버퍼링하세요

코드 복사 코드는 다음과 같습니다.

$(".main img"). lazyload({
자리 표시자: "images/grey.gif",
효과: "fadeIn"
});

lazy 클래스로 마운트된 이미지 로드:

코드 복사 코드는 다음과 같습니다.

$("img.lazy"). lazyload({
자리 표시자: "images/grey.gif",
효과: "fadeIn"
});

나머지는 같은 방법으로 추론할 수 있습니다. 선택기를 적절하게 조정하면 됩니다.

lazyload.js의 고급 사용법:

다음 부분은 공식 문서를 간략하게 번역한 공식 문서의 내용입니다.

더 사려 깊은 접근

우리는 이 질문에 대해 생각해 보아야 합니다. 우리는 이러한 구조를 정의했기 때문에 소스 이미지가 웹 페이지에 로드되지 않습니다. 이 소스 이미지는 Javascript가 실행될 때만 표시됩니다. 사용자의 브라우저가 이를 지원하지 않거나 사용자가 Javascript 지원 옵션을 해제한 경우 이미지가 표시되지 않습니다. 즉, Javascript 지원이 없으면 이미지를 표시할 수 없습니다.

이 문제를 해결하려면 noscript 태그를 도입해야 합니다. 일반적인 아이디어는 다음과 같습니다. noscript를 사용하여 실제 이미지 위치를 포함하고, 브라우저가 Javascript를 지원하지 않는 경우 이미지를 직접 표시합니다.

코드 복사 코드는 다음과 같습니다.

< ;noscript>

기존 이미지의 경우 처리를 숨기고 show() 메서드를 사용하여 표시를 트리거합니다.

코드 복사 코드는 다음과 같습니다.

.lazy {
표시: 없음 ;
}

이렇게 하면 브라우저가 Javascript를 지원하지 않는 경우 맞춤화된 img가 표시되지 않지만 noscript의 이미지는 표시됩니다. 구체적인 구현 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("img.lazy"). show() .lazyload();

미리 로드하세요

기본 상황은 이미지 위치로 스크롤하면 플러그인 로딩이 시작되는 것입니다. 이런 방식으로 사용자는 처음에는 빈 이미지를 본 다음 천천히 나타날 수 있습니다. 사용자가 스크롤하기 전에 이 이미지를 미리 로드하려면 매개변수를 구성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$("img.lazy"). 지연로드({
임계값 : 200
});

threshold 이 매개변수는 미리 로드하는 데 사용됩니다. 위 명령문의 의미는 이미지에서 아직 200픽셀 떨어져 있을 때 이미지 로드를 시작한다는 것입니다.

맞춤형 트리거 이벤트

기본 트리거 이벤트는 스크롤 시 확인되어 로드됩니다. 이벤트 속성을 사용하여 자신만의 로딩 이벤트를 설정할 수 있습니다. 그런 다음 이 이벤트를 트리거하는 조건을 사용자 정의한 다음 이미지를 로드할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$("img.lazy"). lazyload({
이벤트: "클릭"
});

맞춤형 디스플레이 효과

기본 이미지 구현 효과는 다운로드가 완료된 후 바로 표시되는 것입니다. 이러한 종류의 사용자 경험은 좋지 않습니다. 효과 속성을 설정하여 이미지 표시 효과를 제어할 수 있습니다. 예를 들어

코드 복사 코드는 다음과 같습니다.

$("img.lazy"). lazyload({
효과: "fadeIn"
});

페이드인(fadeIn) 효과는 이미지의 투명도를 변경하여 페이드 방식으로 나타나는 것입니다.

컨테이너에 이미지 삽입

스마트폰을 사용하는 경우 애플리케이션을 다운로드하기 위해 애플리케이션 웹사이트에 자주 방문합니다. 일반적으로 가로 컨테이너를 사용하여 휴대전화의 스크린샷을 저장합니다. 컨테이너 속성을 사용하면 버퍼링된 로딩을 컨테이너에서 쉽게 구현할 수 있습니다. 먼저 CSS로 이 컨테이너를 정의한 다음 이 플러그인으로 로드해야 합니다.

코드 복사 코드는 다음과 같습니다.

#container { 높이: 600px; 스크롤; }
$("img.lazy").lazyload({
컨테이너: $("#container")
});

보이지 않는 이미지 불러오기

일부 이미지는 보이지 않으므로 display:none과 같은 속성을 가진 이미지를 추가합니다. 기본적으로 이 플러그인은 숨겨진 보이지 않는 이미지를 로드하지 않습니다. 보이지 않는 이미지를 로드하는 데 사용해야 하는 경우 Skip_invisible을 false로 설정해야 하며 코드는 다음과 같습니다.

$("img.lazy").lazyload({ Skip_invisible : 거짓});

자, 이것은lazyload.js 플러그인에 대한 간략한 소개입니다.