Node.js 시각적 영역 로드: getBoundingClientRect 메서드
- php是最好的语言원래의
- 2018-08-10 16:56:163382검색
요소가 보이는 영역에 있을 때 로드합니다. 예를 들어 타오바오와 티몰에서 웹페이지를 열면 모든 사진이 로드되지 않지만 스크롤 막대를 해당 영역으로 스크롤하면 사진이 로드됩니다.
방법: 요소 상단에서 브라우저 창 상단까지의 거리가 시각적 영역의 높이보다 작은지 확인하고 높이보다 작은 경우 표시합니다. 여기에서 getBoundingClientRect() 메소드를 사용할 수 있습니다. 이 메소드는 요소의 네 경계에서 브라우저 창의 상단 및 왼쪽까지의 거리를 저장하는 객체를 반환합니다.
getBoundingClientRect 메소드:
코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>可视区域加载</title>
<style>
#showp {
width: 500px;
height: 350px;
background-color: aqua;
margin: 1000px auto 0 auto;
}
.showp {
animation: loading 2s linear;
}
@keyframes loading {
from {
opacity: 0;
transform: translate(-100%, 0);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<p id="showp"></p>
<script type="text/javascript">
window.onscroll = function() {
var show = document.getElementById("showp");
// 获取浏览器窗口可视化高度
var clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// 获取showp元素顶部到浏览器窗口顶部的距离
var showTop = show.getBoundingClientRect().top;
// 如果距离小于可视化窗口高度，就给showp元素添加动画效果
if (showTop <= clientH) {
show.classList.add("showp");
}
};
</script>
</body>
</html>실행 결과: 이유는 모르겠습니다. . . 결과 애니메이션을 게시할 수 없습니다. . . . 말로 설명하면 됩니다. 애니메이션은 처음에 로드되지 않으며 요소가 표시될 수 있는 지점까지 스크롤 막대가 스크롤될 때까지 애니메이션 로드가 시작되지 않습니다. 이 원리는 이미지를 로드하는 데 사용될 수 있습니다. 즉, 이미지가 가시 영역에 도달하면 이미지에 src 값을 할당하는 것입니다.
관련 권장 사항:
더 큰 이미지 보기 숨기려면 이미지를 확대하려면 클릭하세요
위 내용은 Node.js 시각적 영역 로드: getBoundingClientRect 메서드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.