지연 로딩은 어떻게 작동합니까?
일반적인 HTML 이미지는 다음과 같습니다.
<img src="sample.jpg" width="100%"/>지연 로딩 플러그인은 다음과 같이 코드를 재작성합니다.
<img data-src="sample.jpg" width="100%"/>눈치채셨듯이,src속성이 다음으로 변경되었습니다.데이터-src.
왜냐하면 아니src, 브라우저는 처음에 이 이미지를 로드하지 않습니다. 나중에 약간의 JavaScript 코드가 이미지가 뷰포트(사용자의 뷰포트)에 있는지 확인하고 이미지가 내부에 있는지 확인합니다.데이터-src그것으로 돌아간다src이미지의 다운로드 및 표시를 트리거하는 브라우저.
네이티브 지연 로딩이란 무엇입니까?
Chrome에는 "네이티브 지연 로딩"이 함께 제공됩니다. 여기에서 읽을 수 있습니다.
네이티브 지연 로딩은 자바스크립트가 필요 없고 브라우저가 "네이티브"로 하기 때문에 일반적으로 훨씬 빠르다는 장점이 있습니다.
코드는 다음과 같습니다.
<img src="sample.jpg" loading="lazy" width="100%"/>날아다니는 이미지란?
Flying Images는 고성능 지연 로딩 플러그인입니다. 가능한 경우 브라우저의 "네이티브" 지연 로딩을 사용하고, 그렇지 않으면 지연 로딩에 일반 JavaScript를 사용합니다.
Flying Images는 이미지가 뷰포트에 나타나기도 전에 이미지를 로드할 수도 있습니다.
사용자 경험을 해치기 때문에 지연 로딩이 두렵습니까?
플라잉 이미지는 다른 지연 로딩 플러그인과 어떻게 다른가요?
- 내장 지연 로딩 사용 - 가능한 경우 내장된 지연 로드를 사용하고(현재 Chrome에서만 지원됨), 그렇지 않으면 JavaScript를 사용하여 이미지를 지연 로드합니다.
- 뷰포트에 들어가기 전에 이미지 로드 - 다른 플러그인이 뷰포트 "내부"에 있을 때 이미지를 로드하는 반면, 비행 이미지는 뷰포트에 들어가려고 할 때 이미지를 로드합니다.
- 작은 자바스크립트 - 0.5KB, 압축, 축소.
- 원하는 경우 네이티브만 사용할 수 있습니다. – Chrome만 지원하고 싶으신가요? JavaScript를 삽입하지 않는 "네이티브 전용"으로 전환할 수 있습니다.
- 모든 HTML 코드 재작성 - 지연 로딩으로 인해 이미지를 놓치지 마십시오(갤러리 플러그인에 의해 추가된 경우에도).
- 투명 필러 - 작은 투명 base64가 모든 이미지에 추가됩니다. 이미지를 로드할 때 더 이상 깜박임이 없습니다.
- 키워드 제외 - 거의 모든 지연 로딩 플러그인은 제외 기능을 제공하지만 플라잉 이미지는 이미지 상위 노드에서 이미지를 제외할 수도 있습니다. 이미지에 클래스 이름이 없는 경우에 유용합니다.
- IE 및 JavaScript가 비활성화된 브라우저 지원 - Internet Explorer이거나 JavaScript가 완전히 비활성화된 경우에도 모든 이미지가 즉시 로드됩니다(사용
노스크립트꼬리표).
