Issue #3427Opened May 1, 2021by akmittal1 reactions

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)

artfMay 7, 20211 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.