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

Enable turning lazyloading on/off in settings.yml #433

Merged
merged 1 commit into from
Jan 10, 2020

Conversation

arthurattwell
Copy link
Member

Some projects don't need (or shouldn't have) lazyloaded images. This change lets us toggle lazyloading on or off from settings.yml.

How this works:

  • in bundle.js, we include a settings.js, which Jekyll populates with the lazyloading value from settings.yml.
  • settings.js creates a settings object which is then available for all subsequent JS. (In future, we could add other settings to this object if we need them for JS. We do something similar with locales.js, except there we can safely include all of locales.yml, whereas settings.yml may include values that are only for site generation, and should not be exposed in client-side JS. So we are selective about which settings to include in the settings object.)
  • lazyload.js, which is also included in bundle.js, checks whether lazyloading is activated (i.e. settings.web.images.lazyload === true). If it isn't, lazyload.js immediately lets all the images on the page load, without waiting for the image to scroll nearby (i.e. is skips the intersectionObserver and changes data-src attributes to src).

@arthurattwell arthurattwell merged commit 09b3693 into master Jan 10, 2020
@arthurattwell arthurattwell deleted the js-settings-lazyloading branch January 10, 2020 13:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants