懒加载功能

一闪一闪亮晶晶，漫天都是小星星

于 2019-02-16 15:43:22 发布

阅读量1k

点赞数 2

分类专栏：好用的插件

本文链接：https://blog.csdn.net/assassin_0302/article/details/87445842

版权

好用的插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

懒加载原理：

当我们的图片进入可视区域，去请求资源。

需要去监听scroll事件，在scroll事件的回调中，去判断我们的懒加载的图片是否进入可视区域。

根据原理，我们推断出。

1.我们需要整个可视区域的高度。

2.当前图片的top值

3.当top值小于可视区域高度时，那么这个时候，我们就可以判断这个图片已经进入可视区域了。

如图，将图片资源放置在data-original属性上，src实际上都是""的，也就是说，这些图片其实是没有去请求任何图片资源的。

然后，我们要做的就是，当图片进入可视区域之后，将data-original中的图片资源放置到src中

代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>懒加载</title>
    <style>
        .image-item {
            width: 40%;
            height: 400px;
            background: grey;
            margin-right: 5%;
            display: inline-block;
        }
        
        .image-list {
            margin-left: 5%;
        }
    </style>
</head>


<body>
    <ul class="lazyImageList" id="lazyImageList">
        <li>
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
            <img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
        </li>

    </ul>

    <script>
        //获取可是区域的高度
        var viewHeight = document.documentElement.clientHeight;


        /*
        *定义lazyload方法，这个方法会获取所有标记的lazyload的所有的img的图片
        这些图片在我们scroll事件中监听。当我们页面一滑动，这个时候它就会去遍历我的所有的lazyload的所有的图片
        然后判断这些图片的顶部距离可视区域的位置，是否小于可视区域的高度

        */

        function lazyload() {
            var eles = document.querySelectorAll("img[data-original][lazyload]");
            Array.prototype.forEach.call(eles, function(item, index) {
                if (item.dataset.original == "")
                    return;
                var rect = item.getBoundingClientRect(); //这个元素相对于左上角的位置  
                console.log(rect.bottom + ":" + rect.top);
                if (rect.bottom >= 0 && rect.top < viewHeight) {
                    //当元素顶部小于可视高度时，请求图片资源
                    ! function() {
                        var img = new Image();
                        img.src = item.dataset.original;
                        img.onload = function() {
                            item.src = img.src;
                        }
                        item.removeAttribute('data-original');
                        item.removeAttribute('lazyload');
                    }()
                }
            })
        }

        lazyload(); //首屏
        document.addEventListener("scroll", lazyload);
    </script>
</body>

</html>

一闪一闪亮晶晶，漫天都是小星星

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
懒加载功能

懒加载原理：当我们的图片进入可视区域，去请求资源。需要去监听scroll事件，在scroll事件的回调中，去判断我们的懒加载的图片是否进入可视区域。根据原理，我们推断出。1.我们需要整个可视区域的高度。2.当前图片的top值3.当top值小于可视区域高度时，那么这个时候，我们就可以判断这个图片已经进入可视区域了。如图，将图片资源放置在data-orig...
复制链接

扫一扫

专栏目录