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

最新推荐文章于 2024-05-27 14:24:06 发布

SD_54

最新推荐文章于 2024-05-27 14:24:06 发布

阅读量862

点赞数

分类专栏： js/jquery 文章标签： js实现图片懒加载

本文链接：https://blog.youkuaiyun.com/qq_24484911/article/details/96972588

版权

js/jquery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种在富文本编辑器wangEditor3中实现图片懒加载的方法，通过将真实图片地址存放在data-src属性中，并在图片进入可视区域时替换为src属性来达到目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述

我用的是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.youkuaiyun.com/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);
}