项目总结之图片懒加载的实现

最新推荐文章于 2023-06-11 10:30:51 发布

努力努力的小白

最新推荐文章于 2023-06-11 10:30:51 发布

阅读量285

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44028804/article/details/108144020

版权

应用场景：需要加载大量图片

1、当我们一次性加载大量图片的时候，容易造成网络资源浪费，同时也可能造成服务器卡顿。
2、图片懒加载的实现思路：
我们需要做的是，当浏览器滚动的时候，对滚动事件进行监听，当图片距离视口的顶部大于浏览器可见视口的宽度的时，图片不加载，这样就可以减少网络资源的浪费。

设置自定义属性data-src
浏览器滚动监听
这里需要涉及两个知识，防抖函数和节流函数
函数防抖实现

function debounce(fn){
	var timer=null;
	var context=this;
	return function(){
		clearTimeout(timer);
		timer=setTimeout(()=>{
			fn.apply(context);
		},500);
	}
}

防抖函数：相当于坐公交车，当有很多乘客的时候，需要等乘客刷完卡才能发车。
函数节流：相当于每10s上一个乘客，一次只能一个乘客刷卡，在这个10s钟内下一个乘客只能等待。当下一个乘客等待的事件大于10s钟，这个时候才能刷卡上车。
函数节流实现
仔细想想，上面的防抖函数还是有一定的缺点，当我们一直滚动页面的时候，事件驱动的函数一直不执行，所以一直滑动的时候可能有空白。这个时候升级一下防抖函数，使得它在不停滑动的时候依然可以执行。

let allowRun=true
function throttle(fn){
	if(!allowRun){
		return 
	}
	allowRun=false;
	let timer=null;
	let context=this;
	return function(){
		clearTimeout(timer);
		timer=setTimeout(()=>{
			allowRun=true;
			fn.apply(context);
		},500)
	}
}

或者

const throttle = (method, delay) => {
    var lastTime = 0; // 上一次函数触发的时间
    return () => {
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            method(); // method.apply(this) 看你用不用箭头函数
            lastTime = nowTime;
        }
    }
}

节流函数的应用场景：
一般是onrize，onscroll等这些频繁触发的函数，如获取滚动条的位置，然后执行下一步动作；鼠标不断点击触发，mousedown(单位时间内只触发一次)；搜索框input事件，例如要支持输入实时搜索可以使用节流方案
防抖函数的应用场景：
输入框搜索自动补全事件，频繁操作点赞和取消点赞等等，页面resize事件，页面适配时，根据最终呈现的页面情况进行dom渲染，一般使用防抖，只需判断最后一次的变化情况；search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
我实现图片懒加载代码：

<!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>
    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
    <style>
        .container {
           display:flex;
           flex-direction: column;
           align-items: center;
            
        }
        li{
            list-style: none;
            margin-bottom: 20px;
            box-shadow:10px 10px 20px #beb8b8;
        }
        li img{
            width: 550px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
            <li>
                <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2131671052,1266320948&fm=26&gp=0.jpg" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2131671052,1266320948&fm=26&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3730403285,4269153170&fm=15&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2501666588,1749615350&fm=26&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064118306,138002925&fm=26&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=128541766,1606686950&fm=26&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1348943712,3203171815&fm=26&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1455747444,2513081477&fm=26&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1028569858,3809833766&fm=26&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2413620316,15403780&fm=26&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3133783808,3138293121&fm=26&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3498526630,893966852&fm=26&gp=0.jpg" alt="好图" >
            </li>
            <li>
                <img src="" data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1571874522,4293846855&fm=26&gp=0.jpg" alt="好图">
            </li>
            <li>
                <img src="" data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1522042258,31991196&fm=26&gp=0.jpg" alt="好图">
            </li>
            <li>
                <img src="" data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2554064540,2877786637&fm=26&gp=0.jpg" alt="好图">
            </li>
            <li>
                <img  src="" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3458675388,2194311054&fm=26&gp=0.jpg" alt="好图">
            </li>
            <li>
                <img src="" data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3894244356,3498699746&fm=26&gp=0.jpg" alt="好图">
            </li>
            <li>
                <img src="" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2349222115,1264591835&fm=15&gp=0.jpg" alt="好图">
            </li>
            <li>
                <img src="" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3737621307,1063286427&fm=26&gp=0.jpg" alt="好图">
            </li>
            <li>
                <img src="" data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3480628463,59152156&fm=15&gp=0.jpg" alt="好图">
            </li>
            <li>
                <img src="" data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1066816474,3051019761&fm=26&gp=0.jpg" alt="好图">
            </li>
            <li>
                <img src="" data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=196916786,1313957942&fm=15&gp=0.jpg" alt="好图" >
            </li>
    </div>
        <script>

            window.onload=loadImg;
            window.onscroll=imgScroll(loadImg,500);
            function loadImg(){
                let img=document.querySelectorAll('img');
                img.forEach(val=>{
                    let y=val.getBoundingClientRect().top;//每张图片距离浏览器视口的高度
                    if(y<window.innerHeight){
                        val.src=val.dataset.src; //可以看到，我将dataset上的值依次付给了img的src。
                    }
                })
            }
            //监听视口滚动加载,由于滚动事件比较消耗浏览器性能，添加了一个节流函数。
            function imgScroll(fn,delay){
                let lastTime=0;
                return ()=>{
                    var nowTime=Date.now();
                    if(nowTime-lastTime>delay){
                        fn();
                        lastTime=lastTime;
                    }
                }
            }
        </script>
</body>
</html>

努力努力的小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
项目总结之图片懒加载的实现

应用场景：需要加载大量图片1、当我们一次性加载大量图片的时候，容易造成网络资源浪费，同时也可能造成服务器卡顿。2、图片懒加载的实现思路：我们需要做的是，当浏览器滚动的时候，对滚动事件进行监听，当图片距离视口的顶部大于浏览器可见视口的宽度的时，图片不加载，这样就可以减少网络资源的浪费。设置自定义属性data-src浏览器滚动监听这里需要涉及两个知识，防抖函数和节流函数函数防抖实现function debounce(fn){ var timer=null; var context=thi
复制链接

扫一扫