如何用原生js写一个懒加载页面带渐变效果-阿里云开发者社区

如何用原生js写一个懒加载页面带渐变效果

2022-04-27 159

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 懒加载经常是我们性能优化经常使用的方案，那么我们今天就实现一波。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒加载</title>
    <style>
        img {
            display: block;
            margin: 0 auto 50px;
            width: 960px;
            height: 540px;
        }
        .opacity {
            animation: .5s ani linear;
            -webkit-animation: .5s ani linear;
            -moz-animation: .5s ani linear;
        }
        @keyframes ani {
            0% {
                opacity: 0;
            }
            50% {
                opacity: .5;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutb8xegj31hc0u0k77.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutz6y29j31hc0u0ak4.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuu8igyyj31hc0u0qgv.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuug47wrj31hc0u0k2q.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuowb0hj31hc0u0akx.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuyjapsj31hc0u0ths.jpg" alt="">
</body>
<script>
    var len = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    var n = 0; // 存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload();// 页面载入完毕加载可视区域内的图片
    // 监听页面滚动事件
    window.onscroll = function () {
        lazyload();
    };
    // 封装懒加载函数
    function lazyload() {
        // 可见区域高度
        var seeHeight = document.documentElement.clientHeight;
        // 滚动条距离顶部高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = n; i < len; i++) {
            // 如果图片距顶部距离小于可见区域高度与滚动条距离顶部高度之和时，才显示图片
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") == "") {
                    img[i].setAttribute('class', 'opacity');
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
</script>
</html>

如何用原生js写一个懒加载页面带渐变效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

如何用原生js写一个懒加载页面带渐变效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景