我如何将懒惰的负载与Tinymce结合在一起

Question

我在我的网站上有tinymce插件。在Tinymce插件的Textarea中添加图像时，我希望这些图像包含懒惰的加载。我网站的缩略图具有特定类型的懒惰加载，其中SRC图像是灰色的背景。根据用户屏幕的大小，加载了图像的类型。移动图像具有数据摩托车-SRC的数据属性，并且桌面图像具有数据大量SRC的数据属性。

我如何做到这一点，以便一旦上传了我的数据库的表，就可以懒惰地加载图像？

Answer 1

对于将来看来的任何人，您都可以使用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库。