Support lazy loading of images

+++ b/themes/bs_bootstrap/bs_bootstrap.theme
@@ -144,6 +144,21 @@ function bs_bootstrap_form_system_theme_settings_alter(&$form, FormStateInterfac
+    '#options' => ['' => t('None'), 'lazy' => t('Lazy'), 'eager' => t('Eager'), 'auto' => t('Auto')],

It would be really nice to have either a description is provided or a link to specifications. Lazy, Eager, Auto all is not clear to the regular uninformed user. / site builder.

And then we should state what expectedly supports this as well in the UI as a disclaimer. ;-)

+++ b/themes/bs_bootstrap/bs_bootstrap.theme
@@ -407,6 +422,36 @@ function bs_bootstrap_preprocess_select(&$variables) {
+ * Implements hook_preprocess_svg_formatter().

SVG? :-)

And those are actual integration to specific contrib modules, so we should put a reference in the comment.

+++ b/themes/bs_bootstrap/bs_bootstrap.theme
@@ -144,6 +144,21 @@ function bs_bootstrap_form_system_theme_settings_alter(&$form, FormStateInterfac
+  $form['bs_bootstrap']['lazy_loading_iframe'] = [

Thought this would affect all iframes until i have seen that it only affects video_embed cases.. I don't know if you really want to have such a generic setting and later expand it to affect more iframes?

Also not fully sure how this works combined with GDPR postponed loading-on-click features.. And script based iframes?

So maybe this is really video_embed specific?

Note that this (for now) only works in Chrome and Android browser: https://caniuse.com/#search=lazy-loading
For Firefox an issue was created, but no priority was defined yet: https://bugzilla.mozilla.org/show_bug.cgi?id=1542784

Based on the previous feedback, changing the status. Will test it soon.

1. +++ b/themes/bs_bootstrap/bs_bootstrap.theme
   @@ -154,6 +154,21 @@ function bs_bootstrap_form_system_theme_settings_alter(&$form, FormStateInterfac
   +    '#options' => ['' => t('None'), 'lazy' => t('Lazy'), 'eager' => t('Eager')],
   

   I see Mozilla defines it as "Eager", but maybe we should consider a different name, like "Normal", "Default" or something else? On the other hand I feel like we should stick to the definitions mentioned at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading. I don't have a strong opinion about that, just an idea.

2. +++ b/themes/bs_bootstrap/bs_bootstrap.theme
   @@ -154,6 +154,21 @@ function bs_bootstrap_form_system_theme_settings_alter(&$form, FormStateInterfac
   +    '#description' => t('Indicates how the browser should load the image. Eager will load the image immediately, lazy will defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser. More information on this <a href="@link" target="_blank">link</a>.', ['@link' => 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading']),
   

   Maybe change "on this link" to "here".

3. +++ b/themes/bs_bootstrap/bs_bootstrap.theme
   @@ -154,6 +154,21 @@ function bs_bootstrap_form_system_theme_settings_alter(&$form, FormStateInterfac
   +    '#title' => t('Lazy load IFrame'),
   

   iframe should be lowercase, as we're referring to the html element: https://www.w3schools.com/tags/tag_iframe.asp

Last, but not the least, note that this will not work in older Firefox, Firefox for mobiles, IE11, Safari: https://caniuse.com/#feat=loading-lazy-attr. Didn't check if there are some polyfills for those yet, should we just state that we don't support this functionality in those browsers as just yet? Safari should be fixed soon: https://bugs.webkit.org/show_bug.cgi?id=196698.

1. +++ b/themes/bs_bootstrap/bs_bootstrap.theme
   @@ -154,6 +154,21 @@ function bs_bootstrap_form_system_theme_settings_alter(&$form, FormStateInterfac
   +  $form['bs_bootstrap']['lazy_loading_iframe'] = [
   +    '#type' => 'select',
   +    '#title' => t('Lazy load iFrame'),
   +    '#options' => ['' => t('None'), 'lazy' => t('Lazy'), 'eager' => t('Eager')],
   +    '#default_value' => bs_bootstrap_get_setting('lazy_loading_iframe'),
   +    '#description' => t('EXPERIMENTAL feature! Note that new core media is not supported currently.<br/>Indicates how the browser should load the iframe. Eager will load the iframe immediately, lazy will defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser. More information <a href="@link" target="_blank">here</a>.', ['@link' => 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-loading']),
   +  ];
   

   I'm unsure about keeping this at all.

   The "new" feature is in core since 8.6, that's Sept 18.

   It's also way less frequently used and much less of a concern IMHO.

2. +++ b/themes/bs_bootstrap/bs_bootstrap.theme
   @@ -480,6 +532,8 @@ function bs_bootstrap_get_setting($setting_name) {
   +    'lazy_load_img' => '',
   +    'lazy_load_iframe' => '',
   
   +++ b/themes/bs_bootstrap/config/install/bs_bootstrap.settings.yml
   @@ -21,6 +21,8 @@ bs_bootstrap:
        navbar_container_type: fixed
   +  lazy_loading_img: false
   +  lazy_loading_iframe: false
      logo_svg_inline: true
   
   +++ b/themes/bs_bootstrap/config/schema/bs_bootstrap.schema.yml
   @@ -44,6 +44,12 @@ bs_bootstrap.settings:
                  label: 'Title of a link (label or language ISO code)'
   +        lazy_loading_img:
   +          type: string
   +          label: 'Image lazy loading'
   +        lazy_loading_iframe:
   +          type: string
   

   this doesn't seem to match. false as default config, but type string?

Note that lazy loading will be enabled by default in Drupal 9.1: #3167034.

However, I noticed that in their image preprocess function they have this:

  // Without dimensions specified, layout shifts can occur,
  // which are more noticeable on pages that take some time to load.
  // As a result, only mark images as lazy load that have dimensions.
  if (isset($variables['width'], $variables['height']) && !isset($variables['attributes']['loading'])) {
    $variables['attributes']['loading'] = 'lazy';
  }

We don't have any check like that, thus we're adding the lazy attribute also to responsive images, which doesn't happen when I remove this patch.

I'm not sure it's so unrelated. Lazy-loading on images without a predefined width/height might result in layout adjustments as the image gets loaded, I would assume that's the reason for that.

But yes, without doing it for responsive images, it's missing out on the main use case.