javascript - 如何将延迟加载与 TinyMCE 结合？

Question

我的网站上有 TinyMCE 插件。在 TinyMCE 插件的 textarea 中添加图像时，我希望这些图像包含延迟加载。我网站的缩略图具有特定类型的延迟加载，其中 src 图像是灰色背景。根据用户屏幕的大小，加载图像的类型。手机图片有data-mobile-src的data属性，桌面图片有data-large-src的data属性。

我如何做到这样，一旦 textarea 上传到我的数据库表，图像就可以延迟加载？

Answer 1

对于 future 的任何人，您可以使用 extended_valid_elements .
此属性用于允许有效属性，您可以为它们指定默认值。所以基本上，这一行添加了 'loading=lazy'自动地。

extended_valid_elements : 'img[class|src|alt|title|width|loading=lazy]',

我知道你们有些人想使用 data-src就像支持旧浏览器的技术一样，我找不到合适的方法来使用 TinyMCE 提供的任何配置。作为解决方案，我认为这很好用
让 htmlString是从 tinymce 收到的内容字符串和

const doc = new DOMParser().parseFromString(htmlString, "text/html");

doc.body.querySelectorAll('img').forEach(img => {
    img.setAttribute('data-src', img.src),
    img.removeAttribute('src')
})

console.log(doc.body.innerHTML) // your html to be sent to the server

您甚至可以使用此技术将图像更改为图片元素并对其进行 srcset。这种技术也可以使用 JSDom 库在服务器端实现。