Images_jquery 지연 로딩에 대한 지연 로드 jQuery 플러그인 중국어 사용 문서

LazyLoad 기술이란 무엇인가요?

페이지에 사진이 많은 경우 페이지를 열면 필연적으로 서버와 많은 양의 데이터 상호 작용이 발생합니다. 특히 고화질 사진의 경우 수백K의 공간을 차지합니다. Lazy Load는 JavaScript로 작성된 jQuery 플러그인으로, 긴 페이지에서 이미지 로드를 지연시킬 수 있습니다. 브라우저의 표시 영역 외부에 있는 이미지는 사용자가 페이지를 해당 위치로 스크롤할 때까지 로드되지 않습니다. 정확히 반대로 처리했습니다.
큰 이미지가 많이 포함된 긴 페이지에서 이미지를 느리게 로드하면 페이지 로드 속도가 빨라질 수 있습니다. 경우에 따라 브라우저는 표시되는 이미지를 로드한 후 준비 상태로 전환되어 서버 로드를 줄이는 데 도움이 될 수도 있습니다. 속도 향상.
호환 대상: ie6/7/8, firefox 3.5.5, Opera 10.10, safari 4.0.4, chrome 3.0. safari 및 chrome의 일부 기능은 지원되지 않습니다.

Lazy Load는 Matt Mlinac이 만든 YUI ImageLoader 도구 상자에서 영감을 받았습니다.

원문 링크는 다음과 같습니다. http://www.appelsiini.net/projects/lazyload


현재 Lazy Load 버전은 1.8입니다. .1

다운로드 주소: http://www.jb51.net/jiaoben/63757.html

인스턴스 다운로드:

다운로드 명세서:
1. 주의사항: 본 코드는 학습 및 소통용이므로 상업적 목적으로 사용하지 마세요.
2. 참고: 이 코드는 학습 및 의사소통 전용이므로 상업적 목적으로 사용하지 마십시오.
파일 정보: 파일명: Lazy Load 지연 로딩 이미지 예시
파일 해시: dd3e435124e377c2da33344d442f85d1
파일 크기: 1.1MB
파일 업로드 날짜: 2012년 3월 25일
파일 업데이트 날짜: 3월 25일 , 2012
파일 설명: 페이지에 사진이 많은 경우 페이지를 열면 필연적으로 서버와 많은 양의 데이터 상호 작용이 발생합니다. 특히 고화질 사진의 경우 수백K의 공간을 차지합니다. Lazy Load는 JavaScript로 작성된 jQuery 플러그인으로, 긴 페이지에서 이미지 로드를 지연시킬 수 있습니다. 브라우저의 표시 영역 외부에 있는 이미지는 사용자가 페이지를 해당 위치로 스크롤할 때까지 로드되지 않습니다. 정확히 반대로 처리했습니다.

사용 방법 본론으로 들어가겠습니다.

Lazy Load는 jQuery에 따라 다릅니다. 페이지 헤드 영역에 다음 코드를 추가하세요. >

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

지연 로드 사용법 방법은 매우 간단하지만 새 버전에서는 일부 조정이 이루어졌으며 태그의 속성을 수정해야 합니다. 태그의 src 속성을 대기 이미지의 URL로 변경하고, data-original 속성에 실제 이미지 URL을 입력합니다.
는 다음과 같습니다.

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

제안: src의 대기 이미지는 1픽셀 흑백 이미지를 사용하는 것이 가장 좋습니다. .

JS 코드는 다음과 같습니다.

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

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

이렇게 하면 Demo의 효과를 얻을 수 있습니다.

Demo를 보신 후, 효과가 없다고 느끼시나요? ​​이 문제는 나중에 언급됩니다.

실제로 이미지 URL을 저장하기 위해 지정된 data-original 속성을 사용할 필요는 없습니다. 다른 속성 이름은 다음과 같이 직접 지정하세요.
JS 코드는 다음과 같습니다.

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

$("img.lazy").lazyload({ data_attribute : "attr" })

data_attribute 속성을 해당 이름으로 설정하면 됩니다. (참고: HTML 코드는 대소문자를 구분하지 않습니다. 따라서 "data-" 뒤에는 소문자 또는 숫자만 올 수 있습니다.)

브라우저의 경우 JavaScript를 지원하지 않는 경우 해당 다운그레이드 처리가 있어야 합니다.

은 스크립트가 실행되지 않을 때 대체 콘텐츠/텍스트를 정의하는 데 사용되는

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.