Maison > Article > interface Web > js chargement de la zone visuelle : méthode getBoundingClientRect

js chargement de la zone visuelle : méthode getBoundingClientRect

php是最好的语言original: 2018-08-10 16:56:163382parcourir

Charger lorsque l'élément est dans la zone visible. Par exemple, lorsque la page Web est ouverte sur Taobao et Tmall, toutes les images ne sont pas chargées, mais lorsque la barre de défilement défile jusqu'à cette zone, les images sont chargées.

Méthode : Déterminer si la distance entre le haut de l'élément et le haut de la fenêtre du navigateur est inférieure à la hauteur de la zone visuelle, et l'afficher si elle est inférieure à la hauteur. Vous pouvez utiliser une méthode ici : getBoundingClientRect(), qui renvoie un objet qui stocke la distance entre les quatre bords de l'élément en haut et à gauche de la fenêtre du navigateur.

Méthode getBoundingClientRect :

js chargement de la zone visuelle : méthode getBoundingClientRect

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>

Résultat en cours d'exécution : Je ne sais pas pourquoi. . . L'animation du résultat ne peut pas être publiée. . . . Décrivez-le simplement oralement : l'animation ne se chargera pas au début, et l'animation ne commencera à se charger que lorsque la barre de défilement défilera jusqu'au point où l'élément peut être affiché. Ce principe peut être utilisé pour charger des images, c'est-à-dire attribuer la valeur src à l'image lorsqu'elle atteint la zone visible.
Recommandations associées :

Exemple de préchargement d'image JS

Afficher une image plus grande Cliquez pour agrandir l'image pour la masquer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Qu'est-ce que la programmation modulaire ? Résumé de la programmation modulaire jsArticle suivant：Qu'est-ce que la programmation modulaire ? Résumé de la programmation modulaire js

Articles Liés

Voir plus