Skip to content

feat: Support browser-level image lazy-loading #1432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from

Conversation

sy-records
Copy link
Member

Summary

Support browser-level image lazy-loading.

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Code style update
  • Refactor
  • Docs
  • Build-related changes
  • Repo settings
  • Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

  • When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

resolve #1431

You have tested in the following browsers: (Providing a detailed version will be better.)

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE

If adding a new feature, the PR's description includes:

  • A convincing reason for adding this feature
  • Related documents have been updated
  • Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

@vercel
Copy link

vercel bot commented Nov 28, 2020

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/docsify-core/docsify-preview/79yc50200
✅ Preview: https://docsify-preview-git-feat-1431.docsify-core.vercel.app

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 28, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 715f5f4:

Sandbox Source
docsify-template Configuration

anikethsaha
anikethsaha previously approved these changes Nov 28, 2020
@anikethsaha
Copy link
Member

LGTM
can you add a test case.

@sy-records
Copy link
Member Author

@anikethsaha done

@sy-records sy-records requested review from anikethsaha and a team November 28, 2020 09:17
@Koooooo-7 Koooooo-7 requested a review from a team November 29, 2020 08:35
Copy link
Member

@Koooooo-7 Koooooo-7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

@jhildenbiddle
Copy link
Member

@sy-records, @anikethsaha, @Koooooo-7 --

This needs further discussion. Please hold off merging until I can provide detailed feedback...

@jhildenbiddle
Copy link
Member

jhildenbiddle commented Nov 29, 2020

@sy-records, @anikethsaha, @Koooooo-7 --

Two quick suggestions regarding issues and PRs moving forward:

  1. We shouldn't be creating enhancement requests (Support browser-level lazy-loading for images #1431) immediately followed by a PR (this one) without some discussion taking place. The purpose of creating a new issue/feature request is to allow others to discuss the enhancement before code is written. If the implementation is critical to the discussion, a draft PR can be created and linked to in the issue.

  2. The titles of issues and feature requests shouldn't dictate implementation. The title of Support browser-level lazy-loading for images #1431 would be better written as "Support lazy-loading of images". Native lazy-loading is just one of many ways to accomplish the goal. The goal of an enhancement (like lazy-loading) should be to solve a problem or provide additional value, not to "do a technical thing".

Copy link
Member

@jhildenbiddle jhildenbiddle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks to @sy-records for the PR.

Unfortunately, I just don't see the value proposition of the implementation found in this PR. The changes allow adding an attribute to images using markdown syntax, but users familiar enough with "lazy-loading" and willing to modify their markdown to support it can just as easily do so using HTML (which is also valid markdown):

![logo](image.jpg ':loading=lazy')
<img src="image.jpg" loading="lazy">

If we want to support lazy-loading, let's make it a feature of docsify that all users can benefit from without technical knowledge or tedious work (like manually adding attributes to their markdown).

I've added detailed comments to #1431. Let's continue the discussion and make sure we've thought through the implementation and value proposition for end-users before moving forward.

Thanks!

@Koooooo-7 Koooooo-7 self-requested a review December 4, 2020 15:12
Copy link
Member

@trusktr trusktr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Question for @jhildenbiddle: is that the recommended way to test it? Or should we test a regex instead of a snapshot?

Copy link
Member

@trusktr trusktr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should make config option names meaningful based on their purpose.

We should make the config option name imgLoading (or similar) instead of just loading (many things can "load").

@sy-records sy-records closed this Feb 13, 2024
@sy-records sy-records deleted the feat/1431 branch February 13, 2024 06:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support browser-level lazy-loading for images
5 participants