search

zestedesavoir / zmarkdown

Live demo: https://zestedesavoir.github.io/zmarkdown/
MIT License
224 stars 52 forks source link

HTML export: should we add a lazy-loading attribute to all images and iframes? #496

Closed AmauryCarrade closed 7 months ago

AmauryCarrade commented 9 months ago

The HTML Living Standard now includes a loading attribute for images and iframes, allowing them to be loaded only when they are close to the viewing window. This is an easy way to reduce the initial rendering time of some huge web pages full of images and iframes - think of content packed with JSFiddles on Zeste de Savoir.

The loading="lazy" attribute is now supported everywhere, except for iframes on Firefox (support is coming with Firefox 121, current nightly).

Adding a loading="lazy" attribute to all images and iframes might therefore be a good idea. I’d be open to contributing, if this sounds like a good idea to anyone other than myself.

StaloneLab commented 9 months ago

Allowing to have a configuration parameter for it is indeed a good idea, and should be fairly easy to implement. I do not care about the exact syntax used, but would like to have images and iframes separately configurable (see below).

Now regarding whether we should enable these options for ZdS, I never heard of this attribute, but I tend to dislike lazy-loading overall: on unstable connections, it usually causes problems, as it does not allow “unplugging the cable” after having loaded the page (well, allows it, but you’ll get a page with missing content).

Anyway, this grief is especially true for images, because iframes most of the time include content that need an Internet connection to be working (Soundcloud for instance will lazy-load by itself, only loading the sound once the play button has been hit). So IMO: enable it for iframes, not for images. In practice, I will merge any default that fits your needs, provided that it is configurable.

AmauryCarrade commented 9 months ago

Seems fair to me :)

StaloneLab commented 9 months ago

Let's try to include this in the next major version, then :)

StaloneLab commented 7 months ago

Hello, I implemented today all of the required parameters for lazy-loading.

For iframes, options was added by commit https://github.com/zestedesavoir/zmarkdown/commit/28b2196031cefd1fb8da480bf031fff2814c7187 . It is not used by ZMarkdown, as mentioned above, but can be enabled by users of the remark-iframes package.

For images, please have a look at PR #505, and tell me if you feel this is what we wanted. I will merge and release a new version after getting your feedback.