vanilla lazyload
Version 19.1
LazyLoad는 스크롤 없이 볼 수 있는 이미지, 애니메이션 SVG, 비디오 및 iframe의 로드를 뷰포트에 들어갈 때 까지 연기하여 웹 애플리케이션 속도를 높이는 가볍고(2.4kB) 유연한 스크립트입니다. 이는 일반 "바닐라" JavaScript로 작성되었으며 IntersectionObserver API를 활용하고 반응형 이미지를 지원하며 느린 연결에 맞게 웹 사이트를 최적화하고 기본 지연 로딩을 활성화할 수 있습니다. 자세한 내용은 모든 기능을 참조하세요.
➡️ 다음으로 이동: ? 시작하기 - HTML - ? 시작하기 - 스크립트 - ? 조리법 - 데모 - ? 팁과 요령 - ? API-? 모든 기능 비교
이 프로젝트가 마음에 드시나요? ? 나에게 커피를 사주세요!
LazyLoad로 콘텐츠를 로드하려면 실제 속성 대신 일부 data- 속성을 사용해야 합니다. 아래 예.
< img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " /> < img alt =" A lazy image " class =" lazy " src =" lazy-lowQuality.jpg " data-src =" lazy.jpg " />srcset 및 sizes 사용한 지연 반응형 이미지: < img
alt =" A lazy image "
class =" lazy "
data-src =" lazy.jpg "
data-srcset =" lazy_400.jpg 400w,
lazy_800.jpg 800w "
data-sizes =" 100w "
/> 낮은 품질의 자리 표시자를 가지려면 매우 작은 버전의 이미지를 가리키는 src 속성을 추가하세요. 예: src="lazy_10.jpg" .
picture 태그를 사용하여 hi-dpi를 지원하는 지연 반응형 이미지: < picture >
< source media =" (min-width: 1200px) " data-srcset =" lazy_1200.jpg 1x, lazy_2400.jpg 2x " />
< source media =" (min-width: 800px) " data-srcset =" lazy_800.jpg 1x, lazy_1600.jpg 2x " />
< img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />
</ picture > 낮은 품질의 자리 표시자를 가지려면 이미지의 아주 작은 버전을 가리키는 src 속성을 img 태그에 추가하세요. 예: src="lazy_10.jpg" .
picture 태그를 사용하여 자동 WebP 형식 선택이 가능한 지연 반응형 이미지: < picture >
< source
type =" image/webp "
data-srcset =" lazy_400.webp 400w,
lazy_800.webp 800w "
data-sizes =" 100w "
/>
< img
alt =" A lazy image "
class =" lazy "
data-src =" lazy.jpg "
data-srcset =" lazy_400.jpg 400w,
lazy_800.jpg 800w "
data-sizes =" 100w "
/>
</ picture > 낮은 품질의 자리 표시자를 가지려면 이미지의 아주 작은 버전을 가리키는 src 속성을 img 태그에 추가하세요. 예: src="lazy_10.jpg" .
중요 참고 사항 : 페이지에 콘텐츠 이미지를 표시하려면 항상 img 태그를 사용하세요. 이는 SEO와 웹사이트의 접근성에 도움이 됩니다. 이미지가 콘텐츠인지 배경인지 이해하려면 "내 웹사이트 사용자가 페이지를 인쇄할 때 해당 이미지를 보고 싶어할까요?"라고 자문해 보세요. 대답이 "예"라면 이미지는 콘텐츠 이미지이므로 배경 이미지를 사용하여 표시하지 않아야 합니다.
< div class =" lazy " data-bg =" lazy.jpg " > </ div > < div class =" lazy " data-bg =" lazy.jpg " data-bg-hidpi =" [email protected] " > </ div > < div
class =" lazy "
data-bg-multi =" url(lazy-head.jpg),
url(lazy-body.jpg),
linear-gradient(#fff, #ccc) "
>
...
</ div > < div
class =" lazy "
data-bg-multi =" url(lazy-head.jpg),
url(lazy-body.jpg),
linear-gradient(#fff, #ccc) "
data-bg-multi-hidpi =" url([email protected]),
url([email protected]),
linear-gradient(#fff, #ccc) "
>
...
</ div > image-set 배경: < div class =" lazy " data-bg-set =" url('[email protected]') 1x, url('[email protected]') 2x " > ... </ div > image-set 포함된 여러 배경: < div
class =" lazy "
data-bg-set ="
url('[email protected]') 1x, url('[email protected]') 2x |
url('[email protected]') 1x, url('[email protected]') 2x
"
>
...
</ div > < object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object > < video class =" lazy " controls width =" 620 " data-src =" lazy.mp4 " data-poster =" lazy.jpg " >
< source type =" video/mp4 " data-src =" lazy.mp4 " />
< source type =" video/ogg " data-src =" lazy.ogg " />
< source type =" video/avi " data-src =" lazy.avi " />
</ video >비디오 포스터도 느리게 로드될 수 있습니다.
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >이 프로젝트가 마음에 드시나요? ? 나에게 커피를 사주세요!
LazyLoad의 최신 권장 버전은 19.1.3 입니다. Internet Explorer 11을 지원해야 하는 경우 버전 17.9.0 이하를 사용해야 합니다.
실용적인 업그레이드 가이드를 읽으면서 이전 버전에서 업그레이드하는 방법을 빠르게 이해하세요.
LazyLoad를 사용하는 가장 쉬운 방법은 CDN의 스크립트를 포함하는 것입니다.
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js " > </ script >또는 ES 모듈로 가져오려는 경우:
< script type =" module " >
import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm" ;
</ script >그런 다음 자바스크립트 코드에서 다음을 수행합니다.
var lazyLoadInstance = new LazyLoad ( {
// Your custom settings go here
} ) ; LazyLoad를 인스턴스화할 때 지연 콘텐츠에 대한 DOM이 준비되었는지 확인하려면 닫는 </body> 태그 바로 앞에 스크립트 태그를 배치하세요 .
나중에 AJAX 호출 등을 통해 더 많은 DOM이 도착하면 lazyLoadInstance.update(); LazyLoad가 DOM을 다시 확인하도록 합니다.
lazyLoadInstance . update ( ) ;async 스크립트 사용 원하는 경우 async 스크립트를 사용하여 LazyLoad의 스크립트를 포함하고 로드되는 즉시 초기화할 수 있습니다.
이렇게 하려면 스크립트를 포함하기 전에 옵션을 정의해야 합니다 . 다음을 전달할 수 있습니다.
{} LazyLoad의 단일 인스턴스를 가져오기 위한 객체[{}, {}] 각각 다른 옵션이 있는 LazyLoad의 여러 인스턴스를 가져오기 위한 객체 배열입니다. < script >
// Set the options globally
// to make LazyLoad self-initialize
window . lazyLoadOptions = {
// Your custom settings go here
} ;
</ script >그런 다음 스크립트를 포함하십시오.
< script
async
src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script > 닫는 </body> 태그 바로 앞에 스크립트 태그를 배치할 수도 있습니다 . 그렇게 할 수 없는 경우 브라우저가 모든 DOM을 로드하기 전에 LazyLoad가 실행될 수 있으며, 해당 update() 메서드를 호출하여 DOM을 다시 확인해야 합니다.
async 스크립트 사용 + 인스턴스 참조 가져오기 위와 동일하지만 async 스크립트를 포함하기 전에 아래 표시된 addEventListener 코드를 넣어야 합니다.
< script >
// Set the options globally
// to make LazyLoad self-initialize
window . lazyLoadOptions = {
// Your custom settings go here
} ;
// Listen to the initialization event
// and get the instance of LazyLoad
window . addEventListener (
"LazyLoad::Initialized" ,
function ( event ) {
window . lazyLoadInstance = event . detail . instance ;
} ,
false
) ;
</ script >그런 다음 스크립트를 포함하십시오.
< script
async
src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >이제 다음과 같이 해당 메서드를 호출할 수 있습니다.
lazyLoadInstance . update ( ) ;데모 - 단일 LazyLoad 인스턴스의 경우 소스 ←
데모 - 소스 ← 여러 LazyLoad 인스턴스용
프로젝트에 LazyLoad를 로컬로 설치하려는 경우 그렇게 할 수 있습니다!
npm install vanilla-lazyload
bower install vanilla-lazyload
최신 릴리스 중 하나를 다운로드하세요. 필요한 파일은 dist 폴더 안에 있습니다. 어떤 것을 선택해야 할지 모르겠다면 lazyload.min.js 사용하거나 번들에 대해 읽어보세요.
LazyLoad를 로컬에 설치하는 경우 다음과 같이 ES 모듈로 가져올 수 있습니다.
import LazyLoad from "vanilla-lazyload" ; require commonJS 구문을 사용하는 것도 가능하지만 권장되지 않습니다.
WebPack과 함께 LazyLoad를 번들링하는 방법에 대한 자세한 내용은 이 특정 저장소에서 확인할 수 있습니다.
Sandbox에서 LazyLoad와 함께 React를 사용하는 예를 살펴보세요.
이 구현은 일반적으로 img 태그에 전달하는 것과 동일한 소품을 사용하지만 게으른 이미지를 렌더링합니다. 자유롭게 포크하여 개선해보세요!
dist 폴더 안에는 다양한 번들이 있습니다.
| 파일 이름 | 모듈 유형 | 장점 |
|---|---|---|
lazyload.min.js | UMD(범용 모듈 정의) | 심지어 common-js 컨텍스트에서도 거의 모든 곳에서 작동합니다. |
lazyload.iife.min.js | IIFE(즉시 호출 함수 표현) | 인페이지 <script src="..."> 로 작동하며 UMD 버전보다 ~0.5kb 작습니다. |
esm/lazyload.js | ES 모듈 | <script type="module" src="..."> 및 WebPack 또는 Rollup과 같은 번들러를 사용하여 프로젝트에서 가져올 수 있도록 LazyLoad 를 내보냅니다. |
이 프로젝트가 마음에 드시나요? ? 나에게 커피를 사주세요!
편의를 위해 코드를 복사하여 붙여넣을 수 있는 섹션입니다.
사용 사례 : 지연 로드된 이미지가 로드되기 전에
alt텍스트와 빈 이미지 아이콘을 표시하는 경우.
CSS
img : not ([ src ]) : not ([ srcset ]) {
visibility : hidden;
}정말 그렇습니다.
사용 사례 : 웹 사이트에 존재하지 않거나 깨진 이미지가 표시되는 것을 방지하려는 경우.
자바스크립트
var myLazyLoad = new LazyLoad ( {
// Other options here...
callback_error : ( img ) => {
// Use the following line only if your images have the `srcset` attribute
img . setAttribute ( "srcset" , "[email protected] 1x, [email protected] 2x" ) ;
img . setAttribute ( "src" , "[email protected]" ) ;
}
} ) ;참고: 네트워크 중단(일시적으로 오프라인인 경우 탐색기)으로 인해 오류가 발생한 경우, 바닐라 지연 로드는 네트워크를 다시 사용할 수 있게 되면 이미지를 다시 로드하려고 시도합니다.
예 - API
사용 사례 : 이미지를 느리게 로드하고 싶지만 비동기식으로 추가되었기 때문에 스크롤 영역에서 변경되는 이미지 수가 변경되는 경우.
자바스크립트
var myLazyLoad = new LazyLoad ( ) ;
// After your content has changed...
myLazyLoad . update ( ) ;데모 - 소스 - API
사용 사례 :
use_native옵션을 사용하여 지원되는 브라우저 엔진에 이미지, iframe 및 비디오 로드를 위임하고 싶지만 배경 이미지도 느리게 로드하려고 합니다.
HTML
< img class =" lazy " alt =" A lazy image " data-src =" lazy.jpg " />
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >
< video class =" lazy " controls data-src =" lazy.mp4 " data-poster =" lazy.jpg " > ... </ video >
< object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >
< div class =" lazy " data-bg =" lazy.jpg " > </ div >자바스크립트
// Instance using native lazy loading
const lazyContent = new LazyLoad ( {
use_native : true // <-- there you go
} ) ;
// Instance without native lazy loading
const lazyBackground = new LazyLoad ( {
// DON'T PASS use_native: true HERE
} ) ;데모 - 소스 - API
사용 사례 : 스크롤 컨테이너가 기본 브라우저 창이 아니라 스크롤 컨테이너인 경우.
HTML
< div class =" scrollingPanel " >
<!-- Set of images -->
</ div >자바스크립트
var myLazyLoad = new LazyLoad ( {
container : document . querySelector ( ".scrollingPanel" )
} ) ;데모 - 소스 - API
스크롤 패널이 여러 개인 경우 다음 마크업과 코드를 사용할 수 있습니다.
HTML
< div id =" scrollingPanel1 " class =" scrollingPanel " >
<!-- Set of images -->
</ div >
< div id =" scrollingPanel2 " class =" scrollingPanel " >
<!-- Set of images -->
</ div >자바스크립트
var myLazyLoad1 = new LazyLoad ( {
container : document . getElementById ( "scrollingPanel1" )
} ) ;
var myLazyLoad2 = new LazyLoad ( {
container : document . getElementById ( "scrollingPanel2" )
} ) ;데모 - 소스 - API
사용 사례 : 주어진 요소가 뷰포트에 들어갈 때 임의의 스크립트나 함수를 실행하려는 경우
HTML
< div class =" lazy " data-lazy-function =" foo " > ... </ div >
< div class =" lazy " data-lazy-function =" bar " > ... </ div >
< div class =" lazy " data-lazy-function =" buzz " > ... </ div >
< div class =" lazy " data-lazy-function =" booya " > ... </ div >JS
// It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window . lazyFunctions = {
foo : function ( element ) {
element . style . color = "red" ;
console . log ( "foo" ) ;
} ,
bar : function ( element ) {
element . remove ( element ) ;
console . log ( "bar" ) ;
} ,
buzz : function ( element ) {
var span = document . createElement ( "span" ) ;
span . innerText = " - buzz!" ;
element . appendChild ( span ) ;
console . log ( "buzz" ) ;
} ,
booya : function ( element ) {
element . classList . add ( "boo" ) ;
console . log ( "booya" ) ;
}
} ; function executeLazyFunction ( element ) {
var lazyFunctionName = element . getAttribute ( "data-lazy-function" ) ;
var lazyFunction = window . lazyFunctions [ lazyFunctionName ] ;
if ( ! lazyFunction ) return ;
lazyFunction ( element ) ;
}
var ll = new LazyLoad ( {
unobserve_entered : true , // <- Avoid executing the function multiple times
callback_enter : executeLazyFunction // Assigning the function defined above
} ) ; 함수가 여러 번 실행되는 것을 방지하려면 unobserve_entered 사용하세요.
그게 다야. data-lazy-function 속성이 있는 요소가 뷰포트에 들어갈 때마다 LazyLoad는 data-lazy-function 속성 자체에서 함수 이름을 가져와 실행하는 executeLazyScript 함수를 호출합니다.
데모 - 소스 - API
사용 사례 : 가로로 스크롤되는 컨테이너가 많고 해당 컨테이너에서 LazyLoad 인스턴스를 인스턴스화하려고 하지만 해당 컨테이너가 뷰포트에 들어갈 때만 인스턴스화하려는 경우입니다.
HTML
< div class =" horizContainer " >
< img
src =""
alt =" Row 01, col 01 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_01&w=200&h=200 "
/>
< img
src =""
alt =" Row 01, col 02 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_02&w=200&h=200 "
/>
<!-- ... -->
</ div >
< div class =" horizContainer " >
< img
src =""
alt =" Row 02, col 01 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_01&w=200&h=200 "
/>
< img
src =""
alt =" Row 02, col 02 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_02&w=200&h=200 "
/>
<!-- ... -->
</ div >자바스크립트
var lazyLoadInstances = [ ] ;
var initOneLazyLoad = function ( horizContainerElement ) {
// When the .horizContainer element enters the viewport,
// instantiate a new LazyLoad on the horizContainerElement
var oneLL = new LazyLoad ( {
container : horizContainerElement
} ) ;
// Optionally push it in the lazyLoadInstances
// array to keep track of the instances
lazyLoadInstances . push ( oneLL ) ;
} ;
// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad ( {
elements_selector : ".horizContainer" ,
callback_enter : initOneLazyLoad ,
unobserve_entered : true // Stop observing .horizContainer(s) after they entered
} ) ; 그게 다야. .horizContainer 요소가 뷰포트에 들어갈 때마다 LazyLoad는 .horizContainer 요소에 LazyLoad의 새 인스턴스를 생성하는 initOneLazyLoad 함수를 호출합니다.
데모 - 소스 - API
이 프로젝트가 마음에 드시나요? ? 나에게 커피를 사주세요!
귀하의 경우에 정확히 일치하는 레시피를 찾지 못하셨나요? 데모가 있습니다!
데모 폴더에는 30개 이상의 바닐라 지연 로드 사용 사례가 포함되어 있습니다. 거기에서 당신이 찾고 있는 것을 찾을 수도 있습니다.
| 유형 | 제목 | 암호 | 데모 |
|---|---|---|---|
| 콘텐츠 | 자리 표시자를 사용하지 않는 단순한 지연 로드 이미지 | 암호 | 살다 |
| 콘텐츠 | 인라인 SVG를 자리 표시자로 사용하는 게으른 이미지 | 암호 | 살다 |
| 콘텐츠 | 외부 SVG 파일을 자리 표시자로 사용하는 게으른 이미지 | 암호 | 살다 |
| 콘텐츠 | srcset 사용한 지연 반응형 이미지 | 암호 | 살다 |
| 콘텐츠 | <picture> 태그와 media 속성(아트 디렉션)이 있는 지연 반응형 이미지 | 암호 | 살다 |
| 콘텐츠 | srcset 및 sizes 있는 지연 반응형 이미지( data-sizes 사용) | 암호 | 살다 |
| 콘텐츠 | srcset 및 sizes 있는 지연 반응형 이미지(일반 sizes 사용) | 암호 | 살다 |
| 콘텐츠 | 여러 <source> 태그, 다양한 미리 로드 옵션, 자동 재생 기능이 없는 게으른 비디오 | 암호 | 살다 |
| 콘텐츠 | 여러 <source> 태그, 다양한 미리 로드 옵션, 자동 재생 기능이 있는 게으른 비디오 | 암호 | 살다 |
| 콘텐츠 | 지연 로딩 배경 이미지 | 암호 | 살다 |
| 콘텐츠 | 여러 배경 이미지 지연 로딩 | 암호 | 살다 |
| 콘텐츠 | image-set() 사용한 지연 로딩 배경 이미지 | 암호 | 살다 |
| 콘텐츠 | 지연 로딩 iframe | 암호 | 살다 |
| 콘텐츠 | 애니메이션 SVG 및 PDF 파일 지연 로딩 | 암호 | 살다 |
| 콘텐츠 | <picture> 태그와 WebP의 type 속성이 있는 지연 WebP 이미지 | 암호 | 살다 |
| 로드 중 | <script async> 사용한 비동기 로딩 LazyLoad | 암호 | 살다 |
| 로드 중 | <script async> 사용하여 여러 LazyLoad 인스턴스를 비동기적으로 로드 | 암호 | 살다 |
| 오류 | restore_on_error 가 false 인 경우 테스트 오류 로딩 동작 | 암호 | 살다 |
| 오류 | restore_on_error 가 true 인 경우 테스트 오류 로딩 동작 | 암호 | 살다 |
| 기술 | 이미지가 로드될 때 페이드 인 | 암호 | 살다 |
| 기술 | CSS 전용 수평 슬라이더의 이미지 지연 로드(Netflix 스타일) | 암호 | 살다 |
| 기술 | Swiper 인스턴스를 느리게 생성하고 Swiper 이미지를 느리게 로드합니다. | 암호 | 살다 |
| 기술 | 특정 요소가 뷰포트에 들어갈 때 함수를 느리게 실행합니다. | 암호 | 살다 |
| 기술 | 게으른 이미지가 있는 페이지 인쇄를 관리하는 방법 | 암호 | 살다 |
| 기술 | 스크롤 컨테이너에 게으른 이미지가 포함된 팝업 레이어 | 암호 | 살다 |
| 설정 | 다중 스크롤 컨테이너 | 암호 | 살다 |
| 설정 | 단일 스크롤 컨테이너 | 암호 | 살다 |
| 행동 양식 | DOM을 원래 상태로 restore() 방법 및/또는 LazyLoad를 destroy() 방법 | 암호 | 살다 |
| 행동 양식 | 동적 콘텐츠를 추가한 후 update() LazyLoad | 암호 | 살다 |
| 행동 양식 | 동적 콘텐츠를 추가한 다음 요소의 NodeSet을 전달하는 update() LazyLoad | 암호 | 살다 |
| 행동 양식 | load() 메서드를 사용하여 시간에 맞는 이미지 로드 | 암호 | 살다 |
| 행동 양식 | loadAll() 사용하여 모든 이미지를 한 번에 로드 | 암호 | 살다 |
| 시험 | 여러 임계값 테스트 | 암호 | 살다 |
| 시험 | 숨겨진 이미지로 동작 테스트 | 암호 | 살다 |
| 시험 | 테스트 성능, 수백 개의 이미지 지연 로딩 | 암호 | 살다 |
| 토종의 | 이 스크립트는 물론 자바스크립트 한 줄도 사용하지 않고 이미지의 기본 지연 로딩을 테스트하세요. | 암호 | 살다 |
| 토종의 | use_native 옵션을 사용하여 조건부로 이미지의 네이티브 지연 로딩을 테스트합니다(API 참조). | 암호 | 살다 |
이 프로젝트가 마음에 드시나요? ? 나에게 커피를 사주세요!
