한국어
한국어
Lazy Loading은 웹 사이트 액세스 속도를 향상시키고, 대역폭 소비를 줄이며, 비정규 리소스로드를 지연시켜 사용자 경험을 향상시킬 수있는 웹 성능 최적화 기술입니다. PHP 웹 사이트 개발에서 게으른로드는 일반적으로 사진, 오디오 및 비디오 및 기타 대형 파일 리소스의로드 지연에 사용됩니다.
이 기사는 PHP 웹 사이트에서 게으른로드를 구현하여 웹 사이트 액세스 속도를 향상시키는 방법을 설명하기 위해 예제를 사용합니다.
게으른 하중 구현은 일반적으로 게으른 부하, Noveil.js 등과 같은 타사 플러그인 라이브러리에 따라 다릅니다. 이러한 라이브러리는 쉽고 빠른 사용을 위해 NPM 또는 CDN을 통해 도입 할 수 있습니다.
다음은 게으른로드 플러그인을 사용하여 게으른 이미지 로딩을 구현하는 예제 코드입니다.
<!-- 존재하다<head>태그에 소개되었습니다Lazy Load플러그인 라이브러리 -->
<script src="https://cdn.jsdelivr.net/npm/lazyload/lazyload.js"></script>
<!-- 존재하다图片标签가운데添加data-src재산，실제 이미지 주소를 넣으십시오data-src가운데，동시에 추가되었습니다lazy친절한 -->
<img class="lazy" data-src="path/to/your/image.jpg" alt="샘플 사진" />
<!-- 초기화Lazy Load플러그인 -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
</script>위의 방법을 통해 실제 그림은 사진이 사용자 창에 들어가는 경우에만로드되므로 페이지의 초기로드 시간이 줄어 듭니다.
게으른 로딩은 사진뿐만 아니라 오디오 및 비디오 리소스에도 적합합니다. 페이지 스크롤링 이벤트를 모니터링하여 요소가 창 범위 내에 있는지 여부를 결정하고 오디오 및 비디오 컨텐츠를 동적으로로드하고 재생하십시오.
게으른 비디오 로딩 예는 다음과 같습니다.
<video controls muted loop autoplay preload="none" id="lazy-video" data-src="path/to/your/video.mp4"></video>
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyVideo = document.getElementById("lazy-video");
window.addEventListener("scroll", function() {
var rect = lazyVideo.getBoundingClientRect();
var inViewPort = (rect.top >= 0 && rect.bottom <= window.innerHeight);
if (inViewPort) {
lazyVideo.src = lazyVideo.dataset.src;
}
});
});
</script>이 예에서 비디오 태그는 Preload = "None"을 사용하여 자원을 자동으로로드하지 않도록합니다. 사용자가 페이지를 스크롤하고 비디오가 창에 들어가면 비디오가로드되어 재생되기 시작하여 페이지의 초기로드 압력을 효과적으로 줄입니다.
게으른로드 기술은 PHP 웹 사이트에서 처음로로드 한 리소스의 양을 크게 줄여서 액세스 속도를 높이고 사용자 경험을 최적화 할 수 있습니다. 이 기사 예제는 사진과 오디오 및 비디오의 게으른 로딩 방법을 보여줍니다. 개발자는 웹 사이트 성과를 더욱 향상시키기 위해 웹 사이트에 따라 유연하게 적용 할 수 있습니다.
