Skip to content
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

Make lazyload working again #957

Merged
merged 4 commits into from Jul 10, 2019

Conversation

@stevenjoezhang
Copy link
Member

commented Jul 9, 2019

PR Checklist

Please check if your PR fulfills the following requirements:

  • The commit message follows our guidelines.
  • Tests for the changes was maked (for bug fixes / features).
    • Muse | Mist have been tested.
    • Pisces | Gemini have been tested.
  • Docs in NexT website have been added / updated (for features).

PR Type

What kind of change does this PR introduce?

  • Bugfix.
  • Feature.
  • Code style update (formatting, local variables).
  • Refactoring (no functional changes, no api changes).
  • Build related changes.
  • CI related changes.
  • Documentation content changes.
  • Other... Please describe:

What is the current behavior?

Issue resolved: N/A

Images inside .content element already have src attribute. Browsers will load them by default, so lazyload: true takes no effect.

What is the new behavior?

  • Screenshots with this changes: N/A
  • Link to demo site with this changes: N/A

How to use?

In NexT _config.yml:

...

Does this PR introduce a breaking change?

  • Yes.
  • No.
@stevenjoezhang stevenjoezhang added this to the v7.3.0 milestone Jul 9, 2019
@stevenjoezhang stevenjoezhang added this to In progress in Feats. / Imprs. / Fixes via automation Jul 9, 2019
@auto-assign auto-assign bot requested review from ivan-nginx, maple3142 and sli1989 Jul 9, 2019
@stevenjoezhang stevenjoezhang requested a review from 1v9 Jul 9, 2019
@jiangtj

This comment has been minimized.

Copy link
Member

commented Jul 10, 2019

How about use lozad or lazysizes instead of it ?

I prefer lozad.

@stevenjoezhang

This comment has been minimized.

Copy link
Member Author

commented Jul 10, 2019

Good idea. Currently, lazyload relies on jQuery and has some issues - one image makes two network requests

@stevenjoezhang

This comment has been minimized.

Copy link
Member Author

commented Jul 10, 2019

I didn't use these two lazyload plugins before. What are the differences in functionality and performance between them? Seems lazysizes has more stars / forks.

@jiangtj

This comment has been minimized.

Copy link
Member

commented Jul 10, 2019

lazysizes is a full-featured lazy loading library that lazy loads images and iframes. The pattern it uses is quite similar to the code examples shown here in that it automatically binds to a lazyload class on elements, and requires you to specify image URLs in data-src and/or data-srcset attributes, the contents of which are swapped into src and/or srcset attributes, respectively. It uses intersection observer (which you can polyfill), and can be extended with a number of plugins to do things like lazy load video.

lozad.js is a super lightweight option that uses intersection observer only. As such, it's highly performant, but will need to be polyfilled before you can use it on older browsers.

--- from google web developers

@stevenjoezhang

This comment has been minimized.

Copy link
Member Author

commented Jul 10, 2019

I see. I also support using the lightweight one - lozad.js

js
@jiangtj

This comment has been minimized.

Copy link
Member

commented Jul 10, 2019

Need add a options to load polyfill for ie user.
https://github.com/ApoorvSaxena/lozad.js#browser-support

GitHub
🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more - ApoorvSaxena/lozad.js
@stevenjoezhang

This comment has been minimized.

Copy link
Member Author

commented Jul 10, 2019

No need to add an option to load polyfill for ie user. NexT v7 already dropped ie support.

@stevenjoezhang stevenjoezhang requested a review from jiangtj Jul 10, 2019
_config.yml Show resolved Hide resolved
Feats. / Imprs. / Fixes automation moved this from In progress to Reviewer approved Jul 10, 2019
@stevenjoezhang stevenjoezhang merged commit 69ca043 into master Jul 10, 2019
4 of 5 checks passed
4 of 5 checks passed
Codacy/PR Quality Review Not up to standards. This pull request quality could be better.
Details
Mergeable Mergeable Run has been Completed!
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
license/cla Contributor License Agreement is signed.
Details
Feats. / Imprs. / Fixes automation moved this from Reviewer approved to Done Jul 10, 2019
@delete-merged-branch delete-merged-branch bot deleted the lazyload branch Jul 10, 2019
@1v9 1v9 removed the 🛠 Improvement label Jul 19, 2019
@stevenjoezhang stevenjoezhang referenced this pull request Aug 5, 2019
6 of 15 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
3 participants
You can’t perform that action at this time.