Node.js 시각적 영역 로드: getBoundingClientRect 메서드-JS 튜토리얼-php.cn

Node.js 시각적 영역 로드: getBoundingClientRect 메서드

php是最好的语言

풀어 주다： 2018-08-10 16:56:16

원래의

3451명이 탐색했습니다.

요소가 보이는 영역에 있을 때 로드합니다. 예를 들어 타오바오와 티몰에서 웹페이지를 열면 모든 사진이 로드되지 않지만 스크롤 막대를 해당 영역으로 스크롤하면 사진이 로드됩니다.

방법: 요소 상단에서 브라우저 창 상단까지의 거리가 시각적 영역의 높이보다 작은지 확인하고 높이보다 작은 경우 표시합니다. 여기에서 getBoundingClientRect() 메소드를 사용할 수 있습니다. 이 메소드는 요소의 네 경계에서 브라우저 창의 상단 및 왼쪽까지의 거리를 저장하는 객체를 반환합니다.

getBoundingClientRect 메소드:

Node.js 시각적 영역 로드: 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 값을 할당하는 것입니다.
관련 권장 사항:

JS 이미지 사전 로드 예시

더 큰 이미지 보기 숨기려면 이미지를 확대하려면 클릭하세요

위 내용은 Node.js 시각적 영역 로드: getBoundingClientRect 메서드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!