Make lazyload working again

[stevenjoezhang]

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.

[jiangtj]

How about use lozad or lazysizes instead of it ?

I prefer lozad.

[stevenjoezhang]

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

[stevenjoezhang]

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]

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]

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

[jiangtj]

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

GitHub

ApoorvSaxena/lozad.js

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

[stevenjoezhang]

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

[stevenjoezhang]

See also hexojs/hexo-renderer-marked#156