图片懒加载+节流

最新推荐文章于 2021-12-05 19:04:17 发布

chonyhaha

最新推荐文章于 2021-12-05 19:04:17 发布

阅读量136

点赞数

文章标签： javascript 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/chonyhaha/article/details/120892942

版权

图片的懒加载

在查阅一定资料以后，我发现懒加载还是蛮重要的。原因在于，一次性将所有图片加载以后，会造成一种什么情况呢，网页内容加载缓慢，毕竟，图片是需要占据比较大存储空间的。无形之中，将我们整个的加载时间延长。而且，大部分下拉式滚动条，都是在我们下拉过程中对图片进行加载的。这样子可以缩短网页加载时长，用户体验度要好一些

代码源自引用，非本人所创

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载</title>
    <style>
        .images{
            display: flex;
            flex-direction: column;
            text-align: center;
            width: 500px;
        }
        .img-item{
            height: 400px;
            width:400px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <!-- 图片懒加载，与正常加载方式不同的 -->
    <div class="images">
        <img class="img-item" alt="loading" data-src="../img/American.jpg">
        <img class="img-item" alt="loading" data-src="../img/boy.jpg">
        <img class="img-item" alt="loading" data-src="../img/game.jpg">
        <img class="img-item" alt="loading" data-src="../img/hello.jpg">
        <img class="img-item" alt="loading" data-src="../img/xiangsheng.jpg">
    </div>
</body>
<script type="text/javascript">
    var imgs = document.querySelectorAll('img');
    var lazyload = function(){
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        var winTop = window.innerHeight
        for(var i=0;i<imgs.length;i++){
           // 就算再消沉，也不能整天哭吧。开森点
           if(imgs[i].offsetTop <= scrollTop + winTop){
               imgs[i].src = imgs[i].getAttribute('data-src')
           } 
        }
    }
    // 此处便是节流，里面有对方法的一个延时操作
    function throttle(method,delay){
        let timer = null;
        return function(){
            let args = arguments
            clearTimeout(timer)
            timer = setTimeout(function(){
                console.log(this)
                method.apply(this.args)   
            },delay)
        }
    }
    lazyload()
    window.onscroll = throttle(lazyload,200)
</script> 
</html>

这段代码中包括了节流操作，为什么呢？它是为了节省流量，避免高频操作带来过多的损耗。试问，在人处于一个十分急躁的情况下，可能会不自主地疯狂点击按钮或者拉动下拉框等操作，并不会都得到响应。原因是节流操作里面包含了一个时间片，在指定间隔内，它是会给出连续的响应，多余操作不起作用。可以在后台看一下

chonyhaha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
图片懒加载+节流

图片的懒加载在查阅一定资料以后，我发现懒加载还是蛮重要的。原因在于，一次性将所有图片加载以后，会造成一种什么情况呢，网页内容加载缓慢，毕竟，图片是需要占据比较大存储空间的。无形之中，将我们整个的加载时间延长。而且，大部分下拉式滚动条，都是在我们下拉过程中对图片进行加载的。这样子可以缩短网页加载时长，用户体验度要好一些代码源自引用，非本人所创<!DOCTYPE html><html lang="en"><head> <meta charset="UT
复制链接

扫一扫