FEAT: Add lazy loading support for images
Question
What are you trying to add to GrapesJS? Lazily loading support for images.
Describe your feature request detailed
Latest Browsers support lazy loading of images using the loading attribute. <img src="myimg.png" loading="lazy">. There are two possible values eager and lazy. If a loading attribute is not provided images loading is eager.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
Is there an alternative at the latest version?
- Yes (describe the alternative)
- No
Is this related to an issue?
- Yes (Give a link to the issue)
- No
Answers (1)
Thanks @akmittal loading is actually really cool and useful but, for now, I'd like to avoid extending core components (this might lead to unexpected behavior if someone creates a new component by extending the image).
For anyone who wants to make use of loading attribute can easily extend the image component in this way
editor.DomComponents.addType('image', {
model: {
defaults: () => ({
traits: [
'alt',
{
type: 'select',
name: 'loading',
label: 'Loading',
default: 'eager',
options: [
{ id: 'lazy', name: 'Lazy' },
{ id: 'eager', name: 'Eager' }
]
}
],
}),
},
});
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3216
FEAT: Add referrerPolicy to image loading through asset manager
What are you trying to add to GrapesJS? I'm trying to add the Referer header to image loading through asset manager. Describe your feature...
Issue #3317
FEAT: Add support for promises to custom RTE API
What are you trying to add to GrapesJS? Support for richtext editors with promise based APIs. Describe your feature request detailed CKEdit...
Issue #3168
FEAT: Download / Export images - Love to use in classroom project
What are you trying to add to GrapesJS? Ability to export images / images folder in zip download Describe your feature request detailed Gra...
Issue #3608
FEAT: Disable Dragging
What are you trying to add to GrapesJS? I have implemented an alternative text editing component (not based on RTE). I want people to be ab...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.