js实现图片懒加载（wangEditor3富文本）

描述

我用的是wangEditor3富文本，其他的富文本可以参考。

如果不是富文本，使用也完全没问题。

原理

给img标签一个临时属性data-src存放真实地址，如果图片在可视区域内，就赋值给src属性。

wangEditor3需要先将解码后的富文本内容的src替换成data-src，然后填充到富文本区域。

可视区域

如果，offsetTop-scroolTop<clientHeight，则图片进入了可视区内，则被请求。

实施

1、普通情况下，html：

<img data-src="./images/1.jpg">
<img data-src="./images/2.jpg">
<img data-src="./images/3.jpg">
<img data-src="./images/4.jpg">
<img data-src="./images/5.jpg">
<img data-src="./images/6.jpg">
<img data-src="./images/7.jpg">
。。。。

2、wangEditor3情况下，js：

不懂可参看https://mp.csdn.net/postedit/94562305

var tem = Base64.decode(richContent);
tem = tem.replace(/src/g,'data-src');
editor.txt.html(tem);

3、图片懒加载原生js：

只要data-src对应上即可，其他代码都不需要改动。

var imgs = document.querySelectorAll('img');

//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
function getTop(e) {
    var T = e.offsetTop;
    while(e = e.offsetParent) {
        T += e.offsetTop;
    }
    return T;
}

function lazyLoad(imgs) {
    var H = document.documentElement.clientHeight;//获取可视区域高度
    var S = document.documentElement.scrollTop || document.body.scrollTop;
    for (var i = 0; i < imgs.length; i++) {
        if (H + S > getTop(imgs[i])) {
            imgs[i].src = imgs[i].getAttribute('data-src');
        }
    }
}

window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
    lazyLoad(imgs);
}