JS:图片懒加载

最新推荐文章于 2024-08-28 14:58:40 发布

一染星辰

最新推荐文章于 2024-08-28 14:58:40 发布

阅读量92

点赞数

分类专栏： javascript试题文章标签： html5 javascript html

本文链接：https://blog.csdn.net/weixin_59519449/article/details/120078423

版权

javascript试题专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            display: block;
            width: 150px;
            height: 150px;
            margin: 40px;
        }
    </style>
</head>
<body>
    <img a-src="./image/1.jpg" alt="">
    <img a-src="./image/2.jpg" alt="">
    <img a-src="./image/3.jpg" alt="">
    <img a-src="./image/4.jpg" alt="">
    <img a-src="./image/5.jpg" alt="">
    <img a-src="./image/6.jpg" alt="">
    <img a-src="./image/7.jpg" alt="">
    <img a-src="./image/1.jpg" alt="">
    <img a-src="./image/1.jpg" alt="">

    <script>
        // 获取全部的img标签
        var imgs = document.querySelectorAll('img')

        function show() {
            // 获取可视区域的高度
            var bomHeight = innerHeight
            // console.log(bomHeight)

            // 获取滚动条滚动高度
            // document.body.scrollTop: 兼容ie浏览器
            // document.documentElement.scrollTop: 获取浏览器滚动条的滚动高度
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop

            // imgs[0].src = './image/1.jpg'
            // console.log(imgs)

            // 获取最后一张图片距离浏览器顶部的高度
            // console.log(imgs[8].offsetTop)

            for (var i = 0; i < imgs.length; i++) {
                // 浏览器滚动高度 + 可视区域高度 >= imgs[i].offsetTop(每张图片距离顶部的高度)
                if (scrollHeight + bomHeight >= imgs[i].offsetTop) {

                    // getAttribute: 获取元素的属性值
                    // console.log(imgs[i].getAttribute('a-src'))


                    // 如果满足条件,说明图片需要被加载
                    imgs[i].src = imgs[i].getAttribute('a-src')
                }
            }
        }

        // window.onload: 页面加载完成后立即执行

        window.onload = function () {
            show()
        }

        window.onscroll = function () {
            show()
        }

        // 连续赋值
        // window.onload = window.onscroll = function () {
        //     show()
        // }
    </script>
</body>
</html>

一染星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS:图片懒加载

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img { display: block; width: 150px; height: 150px; .
复制链接

扫一扫

专栏目录