我的网站上有 TinyMCE 插件。在 TinyMCE 插件的 textarea 中添加图像时,我希望这些图像包含延迟加载。我网站的缩略图具有特定类型的延迟加载,其中 src 图像是灰色背景。根据用户屏幕的大小,加载图像的类型。手机图片有data-mobile-src的data属性,桌面图片有data-large-src的data属性。
我如何做到这样,一旦 textarea 上传到我的数据库表,图像就可以延迟加载?
最佳答案
对于 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 库在服务器端实现。
关于javascript - 如何将延迟加载与 TinyMCE 结合?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42604808/