지연 로드 이미지
6891 단어 webdevhtmljavascript
왜 레이지 로드인가?
페이지가 도착하면 페이지의 모든 이미지를 포함한 모든 자산을 렌더링하기 시작합니다. 페이지에 사진이 너무 많으면 사이트 사용자가 사진을 볼 수 있는 시간이 늘어납니다.
지연 로딩은 이미지가 뷰포트에 막 진입하려고 할 때만 이미지를 로드하는 기술로, 여러 가지 이점이 있습니다.
사이트 성능
이미지 로드가 지연되면 초기 페이지 로드 시 다운로드해야 하는 페이지의 양이 줄어듭니다. 랜딩 페이지 및 보기 내에 있는 이미지의 경우 이러한 이미지가 먼저 로드되어 더 빠르게 로드됩니다.
대역폭
Heroku 또는 Netlify에서 사이트를 호스팅하면 사용 가능한 대역폭이 제한되며 지연 로딩은 페이지를 로드하는 데 필요한 대역폭 양을 줄이는 데 도움이 됩니다.
이미지를 느리게 로드
이미지를 로드하는 방법은 HTML 및 JavaScript를 사용하여
<img src="">
를 공백에서 정보로 변경할 수 있습니다. src
는 로드 시 브라우저에서 읽고 src
를 이미지 소스로 변경하여 JavaScript로 지연됩니다.HTML의 몇 가지 기본 이미지 태그로 시작합니다.
<img class="lazy-loading-image" data-src="./assets/some-image1.jpg" />
<img class="lazy-loading-image" data-src="./assets/some-image1.jpg" />
<img class="lazy-loading-image" data-src="./assets/some-image1.jpg" />
이제 창 스크롤에 작용하고 지연 로딩을 시작할 자바스크립트:
document.addEventListener("DOMContentLoaded", () => {
const images = document.querySelectorAll("img.lazy-loading-image");
let lazyTimeout;
const lazyLoad = () => {
if (lazyTimeout) {
clearTimeout(lazyTimeout);
}
lazyTimeout = setTimeout(() => {
let scrollTop = window.pageYOffset;
images.forEach((img) => {
if (img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove("lazy-loading-image");
}
});
if (images.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 10);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
})
lazysizes
또는 jQuery Lazy
와 같이 지연 로딩에 대한 타사 옵션도 많이 있습니다.그리고 이미지(또는 비디오 및 iframe)로 가득 찬 전체 페이지를 생성하면 보이지 않는 자산으로 인해 사이트 속도가 느려지는 대신 나중에 로드할 수 있습니다.
Reference
이 문제에 관하여(지연 로드 이미지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/swislokdev/lazy-load-images-20fo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)