Laden des visuellen js-Bereichs: getBoundingClientRect-Methode-js-Tutorial-php.cn

Laden des visuellen js-Bereichs: getBoundingClientRect-Methode

php是最好的语言

Freigeben： 2018-08-10 16:56:16

Original

3327 Leute haben es durchsucht

Laden, wenn sich das Element im sichtbaren Bereich befindet. Wenn die Webseite beispielsweise auf Taobao und Tmall geöffnet wird, werden nicht alle Bilder geladen, aber wenn die Bildlaufleiste in diesen Bereich scrollt, werden die Bilder geladen.

Methode: Bestimmen Sie, ob der Abstand vom oberen Rand des Elements zum oberen Rand des Browserfensters geringer ist als die Höhe des visuellen Bereichs, und zeigen Sie ihn an, wenn er geringer ist als der Höhe. Sie können hier eine Methode verwenden: getBoundingClientRect(), die ein Objekt zurückgibt, das den Abstand von den vier Grenzen des Elements zur oberen und linken Seite des Browserfensters speichert.

getBoundingClientRect-Methode:

Laden des visuellen js-Bereichs: getBoundingClientRect-Methode

Code:

<!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>

Nach dem Login kopieren

Ergebnis ausführen :Ich weiß nicht warum. . . Die resultierende Animation kann nicht gepostet werden. . . . Beschreiben Sie es einfach mündlich: Die Animation wird am Anfang nicht geladen, und die Animation wird erst dann geladen, wenn die Bildlaufleiste zu dem Punkt scrollt, an dem das Element angezeigt werden kann. Dieses Prinzip kann zum Laden von Bildern verwendet werden. Dabei wird dem Bild der Quellwert zugewiesen, wenn es den sichtbaren Bereich erreicht.
Verwandte Empfehlungen:

Beispiel zum Vorladen von JS-Bildern

Größeres Bild anzeigen Klicken Sie, um das Bild zu vergrößern und auszublenden

Das obige ist der detaillierte Inhalt vonLaden des visuellen js-Bereichs: getBoundingClientRect-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!