懒加载

最新推荐文章于 2024-09-11 14:16:25 发布

yl107

最新推荐文章于 2024-09-11 14:16:25 发布

阅读量810

点赞数

分类专栏： js js动态效果练习

本文链接：https://blog.csdn.net/yl107/article/details/74998877

版权

js 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

js动态效果练习

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #outer{
            width: 800px;
            margin:50px auto;
            overflow: hidden;
        }
        h1{
            text-align: center;
        }
        #outer img:nth-of-type(2n){
            float:right;
            margin-bottom:20px;
        }
        #outer img:nth-of-type(2n-1){
            float:left;
            margin-bottom: 20px;
        }
        img{
            width: 350px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <h1>这里是懒加载(延迟加载)图片</h1>
        <img src="" alt="" loadRc="img/1.jpg">
        <img src="" alt="" loadRc="img/2.jpg">
        <img src="" alt="" loadRc="img/3.jpg">
        <img src="" alt="" loadRc="img/4.jpg">
        <img src="" alt="" loadRc="img/5.jpg">
        <img src="" alt="" loadRc="img/6.jpg">
        <img src="" alt="" loadRc="img/7.jpg">
        <img src="" alt="" loadRc="img/8.jpg">
        <img src="" alt="" loadRc="img/9.jpg">
        <img src="" alt="" loadRc="img/10.jpg">
        <img src="" alt="" loadRc="img/11.jpg">
        <img src="" alt="" loadRc="img/12.jpg">
        <img src="" alt="" loadRc="img/13.jpg">
        <img src="" alt="" loadRc="img/14.jpg">
        <img src="" alt="" loadRc="img/15.jpg">
        <img src="" alt="" loadRc="img/16.jpg">
        <img src="" alt="" loadRc="img/17.jpg">
        <img src="" alt="" loadRc="img/18.jpg">
        <img src="" alt="" loadRc="img/19.jpg">
        <img src="" alt="" loadRc="img/20.jpg">
        <img src="" alt="" loadRc="img/21.jpg">
        <img src="" alt="" loadRc="img/22.jpg">
    </div>

    <script>
        var imgs = document.getElementsByTagName('img');
        // window.onload当前页面的（视频 音频 图片 文本）加载完毕执行
        // window.onload = function(){

        // }
        // 创建函数计算目标元素到body顶部的距离
        function getTL(obj){
            var t = 0;
            var l = 0;
            var start = obj;
            while(obj){
                if(obj == start){
                    t += obj.offsetTop;
                    l += obj.offsetLeft;
                    obj = obj.offsetParent;
                }else{
                    t += obj.offsetTop + obj.clientTop;
                    l += obj.offsetLeft + obj.clientLeft;
                    obj = obj.offsetParent;
                }
            }
            return {left:l,top:t};
        }
        window.onload = window.onscroll = function(e){
            var e = e || window.event;
            var h1 = document.documentElement.scrollTop || document.body.scrollTop;
            // 获取浏览器窗口高度
            var h2 = document.documentElement.clientHeight;
            for(var i=0; i<imgs.length; i++){
                // 遍历所有img判断img顶部到body顶部的距离是否大于h1与h2的和
                if(getTL(imgs[i]).top < h1+h2){
                    imgs[i].src = imgs[i].getAttribute('loadRc');
                }
            }
        }
    </script>
</body>
</html>