最简单的实现图片懒加载 for marked.js

[ApliNi]

参考资料

loading 属性: https://developer.mozilla.org/zh-CN/docs/Web/Performance/Lazy_loading
marked.js 渲染器: https://marked.js.org/using_pro#renderer

懒加载

允许推迟资源加载, 直到标签接近可视范围.

loading 属性

loading="eager"   // (默认) 立即加载
loading="lazy"    // 懒加载

使用方法

<!-- 图片 -->
<img alt="url" src="info" loading="lazy" />

<!-- 嵌入窗口 -->
<iframe src="url" title="..." loading="lazy"></iframe>

在 marked.js 中使用

markedjs/marked#1781

const renderer = {
	// 图片懒加载 `loading="lazy"`
	image(href, title, text){
		if(href === null){return text;}
		let out = '<img src="' + href + '" alt="' + text + '" loading="lazy"';
		if(title){out += ' title="' + title + '"';}
		out += this.options.xhtml ? '/>' : '>';
		return out;
	}
};

marked.use({renderer});

console.log(marked.parse('![test](img)'));