js盒子模型 js图片懒加载例子

js盒子模型

client 系列

           clientWidth : 当前元素可视区域的宽度    = 宽度+左右padding
           clientHeight ： 当前元素可视区域的高度  = 高度+上下padding
           clientLeft: 获取当前元素左边框的宽度
           clientTop: 获取当前元素上边框的高度
                1.获取的是数字，而且没有单位
                2.他的值必须是整数，四舍五入
                3.是可视区域的宽度高

offset系列

            offsetWidth：当前元素总宽度   clientWidth + 左右border
            offsetHeight：当前元素总高度   clientHeight + 上下border	
            offsetParent:父级参照物(position定位的，没有往body上找)
	        offsetLeft：左偏移量 :从当前元素的左外边框到父级参照物的左内边框
	        offsetTop：上偏移量 ： 从当前元素的上外边框到父级参照物的上内边框

scroll系列

            scrollHeight:如果当前元素的文本不溢出，那就等于clientHeight
            如果当前元素溢出，那就是当前的高度+上下padding
            scrollWidth:如果当前元素的文本不溢出，那就等于clientWidth
            如果当前元素溢出，那就是当前的宽度+左右padding      
            scrollLeft:当前元素横向滚动条卷去的长度
			scrollTop：当前元素纵向滚动条卷去的高度

在这里插入图片描述

单张图片懒加载

<!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>Document</title>
    <style> 
         * {
            padding:0;
            margin: 0;
        }
        div {
            width: 300px;
            height: 400px;
            margin: 800px auto;
        }
        img {
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
    <div>
        <img src="img/222.jpg" trueImg = "img/36.jpg" alt="">
    </div>
    <script src="js.js"></script>
    <script>
        let div = document.getElementsByTagName('div')[0];
        let img = document.getElementsByTagName('img')[0];
        //确定图片加载的临界条件
        //让图片的下边框和可视窗口的下边框重合时，就该让图片的真实路径显示了（图片加载）
        let winH = win('clientHeight')//当前可视窗口高度
        let curH = img.offsetHeight;//图片自身高度
        let curT = offset(img).top//图片的上偏移量
        window.onscroll = function(){
            if(img.flag){return}
            let winT = win('scrollTop');
           if(winT+winH >curH+curT){
                let address = img.getAttribute('trueImg')
                //拿到图片身上的真实路径
                //把图片真实路径赋值给img
                // 当我给图片赋值真实路径时，先校验这个路径是否正确，正确，再给人家赋值路径
                let newImg = new Image;
                console.log(newImg)
                newImg.src = address;
                newImg.onload = function(){
                    //如果你给newImg赋值路径正确，这个方法执行
                    img.src = address;
                    fadeIn(img)
                    img.flag =true;
                    // 图片一旦加载成功，就给当前图片元素增加一个自定义属性flag，属性值是true，防止图片再次被加载
                }
            }
        }
        function fadeIn(img){
            // 图片如果直接出来，会很突兀，咱们利用opacity让图片慢慢出来;
            setCss(img,'opacity',0.1);
            // 咱们直到元素的透明度默认是1，上来先给他设置为0.1
            let cur = Number(getCss(img,'opacity')) // 这个数值是要被累加的，为了防止字符串拼接的出现，给他转数字
            
         // 获取元素的透明度，然后在此基础上利用定时器不断累加
         // 定时器执行一次，透明度就会被重新被赋值一次
            var timer = setInterval(()=>{
                cur += 0.2
                if(cur>=1){
                    clearInterval(timer)
                }
                setCss(img,'opacity',cur);

            },200)
        }
    
    </script>   
</body>
</html>

多张图片懒加载

<!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>Document</title>
    <style>
    *{
        margin:0;
        padding: 0;
    }
    body{
        background: rgb(12, 245, 253);
    }
    div{
        margin: 100px auto;
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
    }
    img {
            box-sizing: border-box;
            display: block;
            width: 300px;
            height: 400px;
            margin-bottom: 10px;
            padding: 10px;
        }
        #goBack{
            width: 140px;
            height: 140px;
            border-radius: 50%;
            line-height: 140px;
            text-align: center;
            background: rgba(248, 232, 13, 0.6);
            color: green;
            font-size: 30px;
            font-weight: 400;
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <img src="img/222.jpg" trueImg = "img/1.jpg" alt=""> 
    </div>
    <div id="goBack">
        返回顶部
    </div>
    <script src="js.js"></script>
    <script>
         let back = document.getElementById('goBack')
        let img = document.getElementsByTagName('img')
        let winH = win('clientHeight');//当前屏幕高度
        function dly(){
           
            for (var i = 0; i < img.length; i++) {
                dlyImg(img[i])      //每一张 执行
            }
            let winM = win('scrollTop');//滚动条高度
            if(winM>winH){
                css(back,'display','block')
            }else{
                css(back, 'display', 'none')
            }
        }
        function dlyImg(img){
            if(img.flag){return}
            let curH = img.offsetHeight;//图片自身高度
            let curT = offset(img).top;//图片偏移量 
            let winT = win('scrollTop');//滚动条高度
            if(winH+winT>curT+curH){
                let address = img.getAttribute('trueImg');

                let newImg = new Image;
                newImg.src = address;
                newImg.onload = function(){
                    img.src = address;
                    img.flag = true;
                    newImg = null; //使用完释放
                    fadeIn(img)
                }
            }
        }
        function fadeIn(img){
            setCss(img,'opacity',0.05);
            let cur = Number(getCss(img,'opacity'));
            var timer = setInterval(()=>{
                cur += 0.05;
                if(cur>=1){
                    clearInterval(timer);
                }
                setCss(img,'opacity',cur);
            },70);

        }
        dly()
        window.onscroll = dly //滚轮滑动执行
    
        back.onclick = function(){
            let winL = win('scrollTop');
            let dis = winL/50;//把卷曲高度/50
            var timer = setInterval(()=>{
                winL -= dis;//总高度 - 卷曲的50分之一 把值赋值给总高度
                if(winL<=0){
                    clearInterval(timer)
                }
                win('scrollTop',winL);   
            },40)
        }
    </script>
</body>
</html>

点击回到页面顶部

<!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>Document</title>
    <style>
        *{
            margin: 0 ;
            padding: 0;
        }
        #goBack{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            line-height: 200px;
            text-align: center;
            background: goldenrod;
            color: green;
            font-size: 30px;
            font-weight: 400;
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: none;
        }
    
    </style>
</head>
<body>
    <div id="box">
        <img src="1.jpg" alt="">
        <img src="2.jpg" alt="">
        <img src="3.jpg" alt="">
        <img src="4.jpg" alt="">
    </div>
    <div id="goBack">
        返回顶部
    </div>
    <script src="js.js"></script>
    <script>
        let back = document.getElementById('goBack')
        back.onclick = function(){
            let winT = win('scrollTop');
            let dis = winT/50;//把卷曲高度/50
            var timer = setInterval(()=>{
                winT -= dis;//总高度 - 卷曲的50分之一 把值赋值给总高度
                if(winT<=0){
                    clearInterval(timer)
                }
                win('scrollTop',winT);   
            },40)
        }
        window.onscroll = function(){
              // 这个方法你一滑动滚动条，他就会触发
            // 当浏览器滚动条滚动的距离(卷去的高度)大于等于当前屏幕(可视窗口)一屏的高度时，在让再让回到顶部杨素显示
            let winH = win('clientHeight')
            let winT = win('scrollTop')
            if(winT>winH){
                css(back,'display','block')
            }else{
                css(back, 'display', 'none')
            }
        }

    </script>
</body>
</html>```

致我逝去的青春

发布了17 篇原创文章 · 获赞 23 · 访问量 369

私信关注

js盒子模型 js图片懒加载例子

js盒子模型

client 系列

offset系列

scroll系列

单张图片懒加载

多张图片懒加载

点击回到页面顶部

猜你喜欢