返回的富文本字符串夹杂着许多质量很大的图片，很影响网页的加载。 这时候我在想，能不能对其中的图片作懒加载呢？ 说干就干！
接收到的富文本格式：
const richText = `<p style="text-align: center;"><img src="//appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-19-510968724523676.jpg" title="1726710600843745.jpg" alt="1726710600843745.jpg" width="700" height="467"></p><p><br></p><p style="text-align: justify;">立橋銀行一直重視與社區的連結，並致力於推廣我國文化的傳承與發展。適逢中秋佳節，立橋銀行花城分行早前舉辦了一場精彩紛呈的「親子齊賀中秋燈籠手作活動」。</p><p><br></p><p style="text-align: justify;">透過是次親子手作活動，家長和孩子們一同投入創作，齊心努力製作一個個可愛漂亮的兔子燈籠，大大促進親子間的互動與交流。燈籠不僅是中秋佳節的傳統文化之一，同時亦體現了「團圓」和「家庭」的重要價值。</p><p><br></p><p style="text-align:center"><img src="//appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-20-230232-1599441932.jpg" title="1726710636420140.jpg" alt="1726710636420140.jpg" width="700" height="467"></p><p style="text-align: center;"><img src="//appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-20-400412-495468177.jpg" title="1726710682731720.jpg" alt="1726710682731720.jpg" width="700" height="467"></p><p><br></p><p style="text-align: justify;">活動當日，桌上擺滿了各式各樣的手工材料、閃亮的裝飾品，營造出一個充滿節日氛圍和歡樂的場景。家長和孩子一同用心黏貼，每一個燈籠的誕生都見證著家庭的溫馨和愛意。現場歡笑聲不絕於耳，熱鬧非凡。</p><p style="text-align: center;"><img src="//appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-21-050185-686717004.jpg" title="1726710766175039.jpg" alt="1726710766175039.jpg" width="700" height="485"></p><p><br></p><p style="text-align: justify;">通過手作的方式，不僅可以培養孩子們的創造力和動手能力，同時亦讓他們學習到與家人分享、溝通和合作的重要性。對於家長來說，這也是一個難得的機會，讓他們更深入地了解孩子的想法和興趣，拉近了親子間的距離。</p><p><br></p><p style="text-align: justify;">近年來，立橋銀行始終積極踐行「不忘初心，真誠服務社會」的發展宗旨，不斷以更智慧、更便捷、更安全、更貼心的金融服務聚焦關切，誠意盡心，服務社區。立橋銀行期待未來繼續與澳門社區居民攜手向前，共同創建一個充滿活力和文化底蘊的社區！</p><p><br></p><img src="https://appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-54-3206231932295539.jpg" alt="">
<img src="https://appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-18-310404-429181369.jpg" alt="">
<img src="https://appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-13-5404521950110019.jpg" alt="">`
实现思路
- js对富文本内容做解析
- 遍历img标签并添加data-src属性，并将src的值赋给data-src
- 清除img标签中的src属性
- 然后将转换后的富文本内容插入到DOM中
- 监听滚动条，实施懒加载！
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../../styles/template4.css" />
<link rel="stylesheet" href="../../../styles/common.css" />
</head>
<body>
<div class="rich-text" id="richTextContainer"></div>
<script>
const richText = `<p style="text-align: center;"><img src="//appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-19-510968724523676.jpg" title="1726710600843745.jpg" alt="1726710600843745.jpg" width="700" height="467"></p><p><br></p><p style="text-align: justify;">立橋銀行一直重視與社區的連結，並致力於推廣我國文化的傳承與發展。適逢中秋佳節，立橋銀行花城分行早前舉辦了一場精彩紛呈的「親子齊賀中秋燈籠手作活動」。</p><p><br></p><p style="text-align: justify;">透過是次親子手作活動，家長和孩子們一同投入創作，齊心努力製作一個個可愛漂亮的兔子燈籠，大大促進親子間的互動與交流。燈籠不僅是中秋佳節的傳統文化之一，同時亦體現了「團圓」和「家庭」的重要價值。</p><p><br></p><p style="text-align:center"><img src="//appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-20-230232-1599441932.jpg" title="1726710636420140.jpg" alt="1726710636420140.jpg" width="700" height="467"></p><p style="text-align: center;"><img src="//appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-20-400412-495468177.jpg" title="1726710682731720.jpg" alt="1726710682731720.jpg" width="700" height="467"></p><p><br></p><p style="text-align: justify;">活動當日，桌上擺滿了各式各樣的手工材料、閃亮的裝飾品，營造出一個充滿節日氛圍和歡樂的場景。家長和孩子一同用心黏貼，每一個燈籠的誕生都見證著家庭的溫馨和愛意。現場歡笑聲不絕於耳，熱鬧非凡。</p><p style="text-align: center;"><img src="//appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-21-050185-686717004.jpg" title="1726710766175039.jpg" alt="1726710766175039.jpg" width="700" height="485"></p><p><br></p><p style="text-align: justify;">通過手作的方式，不僅可以培養孩子們的創造力和動手能力，同時亦讓他們學習到與家人分享、溝通和合作的重要性。對於家長來說，這也是一個難得的機會，讓他們更深入地了解孩子的想法和興趣，拉近了親子間的距離。</p><p><br></p><p style="text-align: justify;">近年來，立橋銀行始終積極踐行「不忘初心，真誠服務社會」的發展宗旨，不斷以更智慧、更便捷、更安全、更貼心的金融服務聚焦關切，誠意盡心，服務社區。立橋銀行期待未來繼續與澳門社區居民攜手向前，共同創建一個充滿活力和文化底蘊的社區！</p><p><br></p><img src="https://appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-54-3206231932295539.jpg" alt="">
<img src="https://appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-18-310404-429181369.jpg" alt="">
<img src="https://appmiddle.wlbank.tech/webfile/upload/2024/10-18/10-13-5404521950110019.jpg" alt="">`
// 处理 richText 中的 img 标签
const parser = new DOMParser();
const doc = parser.parseFromString(richText, 'text/html');
const images = doc.querySelectorAll('img');
images.forEach(img => {
img.setAttribute('data-src', img.src);
img.src = ''; // 清空 src 属性
});
// 将处理后的 richText 插入到 richTextContainer 中
document.getElementById('richTextContainer').innerHTML = doc.body.innerHTML;
const richiTextImages = document.querySelectorAll('.rich-text img');
// 懒加载功能
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
// 出现到可视区
if (entry.intersectionRatio > 0) {
console.log("出现了", entry)
const ele = entry.target;
const imgSrc = ele.getAttribute('data-src');
if (imgSrc) {
// 预加载
const img = new Image();
img.addEventListener('load', function () {
ele.src = imgSrc;
}, false);
ele.src = imgSrc;
// 加载过清空路径，避免重复加载
ele.removeAttribute('data-src');
}
}
});
}, {
rootMargin: '50px',
threshold: 0.1
});
richiTextImages.forEach(image => {
observer.observe(image);
});
</script>
</body>
</html>
补充
如果想优化体验的话，还可以添加展位图。
