loading lazy for images and iframes

[stalker780]

Type of report

Feature request

Provide description of the new feature

loading="lazy" for images and iframes.

Not possible to add this attribute to images and iframes. There are more and more browsers coming to support this feature, including Chrome. Image and Iframe plugins dialogs should be updated to support loading=lazy as a checkbox

https://caniuse.com/#feat=loading-lazy-attr

[Dumluregn]

Hello, thank you for the suggestion. We will keep it as a feature request, however it's unlikely that we introduce it as our focus in CKEditor 4 is to provide features available to the widest users spectrum possible, while this attribute is still not present even in the latest releases of most browsers. Feel free though to propose it in repo of CKEditor 5, which is our newest and most modern tool and it's more possible they will want to introduce this feature (but still - not before all of our officially supported browsers will adopt this solution).

[f1ames]

@stalker780 please also remember that CKEditor 4 provides very flexible API so you can do a lot with it. In your case, you may simply use toHtml event to post-process editor HTML and add required attributes to image and iframe elements.

[heddn]

There's https://github.com/jhukdev/ckeditor-lazy-load available

[stalker780]

@heddn I was talking about an html attribute which now is supported by majority of modern browsers. Chrome, Firefox, Edge, Opera and even Safary (as experimental feature). Not about a js plugin.

<img src="myimg" loading="lazy" />

https://web.dev/browser-level-image-lazy-loading/

[heddn]

I think we are saying the same thing. I opened https://github.com/jhukdev/ckeditor-lazy-load/issues/1 to make that plugin "do the right thing" to the ckeditor core image plugin.

[heddn]

https://github.com/ckeditor/ckeditor5/issues/10784 is the ckeditor5 issue

[johanadivare]

I have the following code to handle it in CKeditor4 maybe it helps someone:

const LOADING_LAZY = 'lazy';
const LOADING_EAGER = 'eager';

/**
 * For image add `loading` attribute with the correct value.
 * Default value is `lazy`.
 *
 * @see: https://ckeditor.com/old/forums/CKEditor-3.x/Modify-Existing-Plugin
 * @see: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_howtos_dialog_windows.html
 * @see: https://github.com/jahilldev/ckeditor-lazy-load/blob/master/lazyload/plugin.js
 */
// eslint-disable-next-line no-undef
CKEDITOR.on('dialogDefinition', ev => {
  // Take the dialog window name and its definition from the event data.
  const dialogDefinition = ev.data.definition;

  // Only edit the image dialog.
  if ('image' !== ev.data.name) {
    return;
  }

  dialogDefinition.addContents({
    label: 'Loading lazy',
    elements: [
      {
        type: 'checkbox',
        label: 'Load the img lazy?',
        default: 'checked', // Default its checked and on `setup` its unset if we have eager loading.
        setup(type, element) {
          if (element.getAttribute('loading') === LOADING_EAGER) {
            this.getInputElement().$.click();
          }
        },
        onChange() {
          if (null === this.getDialog().getSelectedElement()) {
            return;
          }
          let loadingAttributeValue = LOADING_EAGER;
          if (this.getValue()) {
            loadingAttributeValue = LOADING_LAZY;
          }
          this.getDialog().getSelectedElement().setAttribute('loading', loadingAttributeValue);
        },
        commit(type, element) {
          let loadingAttributeValue = LOADING_EAGER;
          if (this.getValue()) {
            loadingAttributeValue = LOADING_LAZY;
          }
          element.setAttribute('loading', loadingAttributeValue);
        },
      },
    ],
  });
});