js实现图片懒加载之getBoundingClientRect

整体思路其实就是先将图片的地址放到自定义字段中(data-src)，等图片滚动到可视区域后再将图片的data-src赋值给src，从面实现懒加载。

加载前：

<img data-src="https://source.dsiab.com/upload/aa.png">

加载后:

<img data-src="https://source.dsiab.com/upload/aa.png" src="https://source.dsiab.com/upload/aa.png">

所以图片懒加载有两种方式，一种原生js，一种通过api getBoundingClientRect实现。

1、原生js:

加载条件：可视区域 + 滚动条高度 >图片距离顶部距离

Window.innerheight+ document.documentElement.scrollTop > imgs[5].offsetTop

imgs[5].offsetTop 为某一种图片距离顶部的距离

2、getBoundingClientRect方式：

图片距离顶部距离 > 可视区域

 window.innerHeight >bound.top

理解：getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

1.语法：这个方法没有参数。

 rectObject = object.getBoundingClientRect();

2.返回值类型：

rectObject.top：元素上边到视窗上边的距离;

rectObject.right：元素右边到视窗左边的距离;

rectObject.bottom：元素下边到视窗上边的距离;

rectObject.left：元素左边到视窗左边的距离;

实现的代码如下，该方法可以在mounted里面调用：

lazyLoad() {
        var imgs =
document.querySelectorAll('img');
        //用来判断bound.top<=clientHeight的函数，返回一个bool值
        function isIn(el) {
            var bound =
el.getBoundingClientRect();
            debugger
            var clientHeight =
window.innerHeight;
            return bound.top <=
clientHeight;
        } 
        //检查图片是否在可视区内，如果不在，则加载
        function check() {
           
Array.from(imgs).forEach(function(el){
                if(isIn(el)){
                    loadImg(el);
                }
            })
        }
        function loadImg(el) {
            if(!el.src){
                  var source = el.dataset.src;
                  el.src = source;
            }
        }
        window.onload = window.onscroll =
function () { //onscroll()在滚动条滚动的时候触发
            check();
        }


      }

如果设置自定义字段的是用的data-origin-src这种形式的话，那么获取的时候要注意用驼峰的名称，即el.dataset.originSrc，因为浏览器自动会转成驼峰的字段形式，一些自定义的字段都可以通过当前dom的dataset属性获取。

值得注意的是如果引用的是其他网站的图片，其他网站可能会开启防盗链，也就是如果是外部网站的话引入就不允许加载图片，那么你引用的图片可能会显示403，这时候可以通过将自己的网站的Referrer设置为no-referrer，即模拟正常用户打开网页的效果，其实防盗链也就是通过referrer这个字段来实现的。

<meta name="referrer" content="no-referrer" />

本文章由javascript技术分享原创和收集