Support browser-level lazy-loading for images

[oeway]

Feature request

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

What problem does this feature solve?

For pages with many images, instead of loading all the images, using lazy-loading will allow the browser fetch images on demand.

What does the proposed API look like?

I think we can expose an lazy loading option, or enable it by default.

How should this be implemented in your opinion?

Add loading=lazy to img tags.

Are you willing to work on this yourself?

Not sure where to change.

[jhildenbiddle]

Let's update the title to "Support lazy-loading of images" since we don't want to dictate an implementation.

Things to consider:

• Which implementation(s) will work with all browsers supported by docsify?

  Native lazy-loading is not supported by IE11 or Safari (desktop or mobile), all of which are supported by docsify 4.x. Arguably IE11 isn't as important, but desktop and mobile Safari are not browsers that we should overlook. Given the many ways to implement lazy-loading, choosing the simplest implementation (i.e. just adding a loading attribute) over a solution that works for everyone is a mistake.

  Regardless of how we accomplish lazy-loading, the implementation details should be abstracted away from the user so we are free to change the implementation without introducing a breaking change.

• How can we prevent the reflow issue(s) typically associated with lazy loading?

  See https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/ for a description of the problem and proposed solutions/.

  Knowing docsify is primarily a client-side solution, this may not be something we are able to solve without requiring users to add height and width values to images. Chrome's native loading implementation loads the first 2k of images marked for lazy loading in an attempt to get dimension information, but I don't know if other browsers do the same. We should test to confirm as part of our evaluation.

• What does the end result looks like? What about "progressive" vs lazy loading of images?

  The simple solution is to just allow the image to appear once loaded, but doing so can be jarring for end users as content can shift while scrolling the page. Some solutions are covered in the link above discussing reflow, but others exist as well. For example, docsify could render placeholder elements (e.g. empty <div> with a background color) if we know the image dimensions, or we could support progressive image loading which allows displaying a low-resolution image while waiting for full-resolution image to load.

• Have we tested the effects of lazy-loading with auto-scrolling anchor navigation?

  It's been a while since I've looked at the code, but previously scroll positions were calculated on page init instead of onClick which caused scroll positions to be incorrect when resources (like images) loaded after the init occurred. It's a separate problem, but it's one that will be exacerbated by lazy-loading of images if our implementation doesn't account for it. We should not introduce new features (like lazy loading) that break or make other features worse (like auto-scroll navigation).

• Will more people benefit from lazy-loading if we enable it by default?

  If the goal is to improve docsify site performance via lazy-loading, why not enable this feature by default and allow users to opt-out as needed? We could offer a lazyLoading config option which defaults to true, allowing new and existing users to benefit with zero changes to their markdown content. If users prefer they can opt-out by setting lazyLoading to false for the entire site, or for individual images by setting the loading attribute to "eager".

• Have we considered introducing automatic lazy-loading as an official docsify plugin first for 4.x, then later as a possible core feature for v5.x?

  This seems like a reasonable alternative approach. If users want lazy-loading, they can add the plugin much like they do for zoomed images. No breaking changes to existing sites, no added complexity to core (since we're trying to stabilize and more towards 5.x), and we'll have an opportunity to get valuable feedback before considering this as a core feature in v5.

[sy-records]

I provide a plugin https://github.com/sy-records/docsify-loading