懒加载超详解

56 阅读 0 评论 37 点赞

我是靠谱客的博主瘦瘦外套，最近开发中收集的这篇文章主要介绍懒加载超详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

图片懒加载主要是在用户看到图片是加载图片即当图片进入视口是加载，
主要实现的有两点
1.判断图片是否进入视口
2.给图片src赋值显示图片

getBoundingClientRect()主要是处理视口
obj.getBoundingClientRect().top：元素上边到视窗上边的距离;
obj.getBoundingClientRect().right：元素右边到视窗左边的距离;
obj.getBoundingClientRect().bottom：元素下边到视窗上边的距离;
obj.getBoundingClientRect().left：元素左边到视窗左边的距离;

getBoundingClientRect().top是元素顶部相对于视口顶部的距离
> 0 元素顶部在视口顶部下
< 0 元素顶部在视口顶部上
= 0 刚好元素顶部与视口顶部重合

1.判断图片进入视口主要是要判断两个临界情况
1)当图片的底部与视口上方相接即当图片刚好从上面进入视口，满足imgs[i].getBoundingClientRect().bottom>0，
2)当图片的顶部与视口上方相接即当图片刚好从下面进入视口，满足imgs[i].getBoundingClientRect().top<windowH

当两个条件同时满足即在视口内部

2.显示图片
利用data-*属性，实现给图片将图片地址作为其属性再在需要加载时赋值给图片src

属性赋值可以用obj.getAttribute("dataname")//info;获得属性值若元素判断在视口内部，则执行复制src给图片操作，每滚动一次则循环元素看那些元素在视口内

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>懒加载</title>
    <style>
    .container {
        width: 800px;
        margin: 0 auto;
    }
    .container img {
        width: 100%;
        vertical-align: middle;
        height: 400px;
        border: none;
    }
    </style>
</head>

<body>
    <div class="container">
        <img src="" data-img="https://wx3.sinaimg.cn/mw690/6a2afec3ly1fz33wbd4xmj24002o0u0y.jpg" alt="" class="lazyload">
        <img src="" data-img="https://wxt.sinaimg.cn/thumb300/6a2afec3gy1fwvoays5odj22c0340000.jpg?tags=%5B%5D" alt="" class="lazyload">
        <img src="" data-img="https://wx2.sinaimg.cn/mw690/6a2afec3ly1fvo1rrqctlj21oh2ipb2c.jpg" alt="" class="lazyload">
        <img src="" data-img="https://wx3.sinaimg.cn/mw690/6a2afec3ly1fvo1rmjaiij218g0xce82.jpg" alt="" class="lazyload">
        <img src="" data-img="https://wx1.sinaimg.cn/mw690/6a2afec3ly1fvo1r6tcnuj20rs113b2a.jpg" alt="" class="lazyload">
        <img src="" data-img="https://wx3.sinaimg.cn/mw690/6a2afec3ly1fvo1sapswqj22ip1ohhdw.jpg" alt="" class="lazyload">
        <img src="" data-img="https://wxt.sinaimg.cn/thumb300/6a2afec3gy1fwvoays5odj22c0340000.jpg?tags=%5B%5D" alt="" class="lazyload">
        <img src="" data-img="https://wx1.sinaimg.cn/mw690/6a2afec3ly1g0c820owc1j23402c0kjm.jpg" alt="" class="lazyload">
        <img src="" data-img="https://wx2.sinaimg.cn/mw690/6a2afec3ly1g0c820x6orj215o0v97fp.jpg" alt="" class="lazyload">
        <img src="" data-img="https://wx2.sinaimg.cn/mw690/6a2afec3ly1fyy601kwqkj20u010atga.jpg" alt="" class="lazyload">
        <img src="" data-img="https://wx3.sinaimg.cn/mw690/6a2afec3ly1fz33wbd4xmj24002o0u0y.jpg" alt="" class="lazyload">
    </div>
    <script>
    window.onload = function() {
        var imgs = document.getElementsByClassName('lazyload');
        var windowH = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;//屏幕高度的兼容性写法
        loading();
        window.onscroll = function() {
            if (!imgs.length) {//当图片都加载完了就释放监听事件
                window.scroll = null;
            } else {
                loading();
            }
        }

        function loading() {
            imgs = document.getElementsByClassName('lazyload');//这里因为每次执行完后都会变所以必须要重新获取它
            for (var i = 0; i < imgs.length; i++) {
                if (imgs[i].getBoundingClientRect().bottom > 0 &&
                    imgs[i].getBoundingClientRect().top < windowH) {
                    imgs[i].src = imgs[i].getAttribute('data-img');
                    imgs[i].classList.remove('lazyload');
                }
            }
        }
    };
    </script>
</body>

</html>

给一个可以直接引用的js文件


/*
注意页面如果有多个window.onload会覆盖
使用方法
1. <img src="" data-img="https://wx3.sinaimg.cn/mw690/6a2afec3ly1fz33wbd4xmj24002o0u0y.jpg" alt="" class="lazyload">
如1所示添加img  src值为loading图片，data-img为图片的原值，添加lazyload  class
2.复制一下js文件或者复制到项目中

====展望：1.没有监听resize事件和优化scroll事件
		  2.判断元素是否在视口内部的方法也许不全面或者还有其他方法，不是兼容性写法
 */
 window.onload=function(){
        var imgs=document.getElementsByClassName('lazyload');
        var windowH =document.documentElement.clientHeight || document.body.clientHeight|| window.innerHeight ;
        loading();
        window.onscroll = function() {
            if(!imgs.length){
                window.scroll=null;
            }else{
                loading();
            }
        }
        function loading() {
            imgs=document.getElementsByClassName('lazyload');
            for (var i = 0; i < imgs.length; i++) {
                if(imgs[i].getBoundingClientRect().bottom>0&&
                    imgs[i].getBoundingClientRect().top<windowH){
                     imgs[i].src = imgs[i].getAttribute('data-img');
                     imgs[i].classList.remove('lazyload');
                }
            }
        }
    };

如若以上有什么不对的或者可以改进的地方，望联系指出，感谢