Lazyload BC Break Fix

core/CHANGELOG.md

@@ -6,6 +6,8 @@ In order to read more about upgrading and BC breaks have a look at the [UPGRADE
 ## 1.6.1
 
 + [#2040](https://github.com/luyadev/luya/pull/2040) Fixed an issue where LazyLoad widget returns aspect ratio values with commas instead of dots, because of locale formatting.
++ [#2041](https://github.com/luyadev/luya/issues/2041) Fixed Polyfill (for older Browsers). Added new option `replacePlaceholder` (default `true`) to define if the image should replace the placeholder or fade in "above" it.
++ Fixed LazyLoad BC break introduced in 1.6.0
 
 ## 1.6.0 (20. July 2020)
 

core/UPGRADE.md

@@ -5,7 +5,7 @@ This document will help you upgrading from a LUYA Version into another. For more
 
 ## 1.6.0
 
-+ [#2037](https://github.com/luyadev/luya/issues/2037) Because of the recent changes and to make the transition between placeholder and image smoother, the image won't have "position: relative" anymore. The image now relys on the wrapper and the placeholder to set its size. The only issue with that is, that you can't apply a width directly to the `<img>` tag anymore. Now it has to be applied to the parent div (`.lazyimage-wrapper`) or any element above.
++ [#2037](https://github.com/luyadev/luya/issues/2037) The LazyLoad widget now surrounds the image with a wrapper class (that will have the extraClass applied), keep that in mind - you might need to tweak your CSS a little bit. By default this wrapper will then be replaced by the actual image tag (Option: `replacePlaceholder`).
 
 ## 1.0.21
 

core/lazyload/LazyLoad.php

@@ -72,61 +72,70 @@ class LazyLoad extends Widget
  public $options = [];
 
  /**
- * @var array Legacy support for older Browsers (Adds the IntersectionOberserver Polyfill, default: true)
+ * @var boolean Legacy support for older Browsers (Adds the IntersectionOberserver Polyfill, default: true)
  * @since 1.6.0
  */
  public $legacySupport = true;
 
  /**
- * @var array Optionally disable the automatic init of the lazyload function so you can override the JS options
+ * @var boolean Optionally disable the automatic init of the lazyload function so you can override the JS options
  * @since 1.6.0
  */
  public $initJs = true;
 
+ /**
+ * @var boolean If set to false, the size will be set by the placeholder (based on width/height). This enables
+ * smoother fading of the image. Leave on true to have it work with CSS Frameworks like Bootstrap.
+ * Has no effect if `attributesOnly` is `true`.
+ * @since 1.6.1
+ */
+ public $replacePlaceholder = true;
+
  /**
  * @var string The default classes which will be registered.
  * @since 1.6.1
  */
- public $defaultCss = '.lazyimage-wrapper {
- display: block;
- width: 100%;
- position: relative;
- overflow: hidden;
- }
- .lazyimage {
- position: absolute;
- top: 50%;
- left: 50%;
- bottom: 0;
- right: 0;
- opacity: 0;
- height: 100%;
- width: 100%;
- -webkit-transition: .5s ease-in-out opacity;
- transition: .5s ease-in-out opacity;
- -webkit-transform: translate(-50%,-50%);
- transform: translate(-50%,-50%);
- -o-object-fit: cover;
- object-fit: cover;
- -o-object-position: center center;
- object-position: center center;
- z-index: 20;
- }
- .lazyimage.loaded {
- opacity: 1;
- }
- .lazyimage-placeholder {
- display: block;
- width: 100%;
- height: auto;
- background-color: #f0f0f0;
- }
- .nojs .lazyimage,
- .nojs .lazyimage-placeholder,
- .no-js .lazyimage,
- .no-js .lazyimage-placeholder {
- display: none;
- }';
+ public $defaultCss = '
+ .lazyimage-wrapper {
+ display: block;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+ }
+ .lazyimage {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ bottom: 0;
+ right: 0;
+ opacity: 0;
+ height: 100%;
+ width: 100%;
+ -webkit-transition: .5s ease-in-out opacity;
+ transition: .5s ease-in-out opacity;
+ -webkit-transform: translate(-50%,-50%);
+ transform: translate(-50%,-50%);
+ -o-object-fit: cover;
+ object-fit: cover;
+ -o-object-position: center center;
+ object-position: center center;
+ z-index: 20;
+ }
+ .lazyimage.loaded {
+ opacity: 1;
+ }
+ .lazyimage-placeholder {
+ display: block;
+ width: 100%;
+ height: auto;
+ }
+ .nojs .lazyimage,
+ .nojs .lazyimage-placeholder,
+ .no-js .lazyimage,
+ .no-js .lazyimage-placeholder {
+ display: none;
+ }
+ ';
 
  /**
  * @inheritdoc
@@ -142,21 +151,24 @@ public function init()
  // register the asset file
  if ($this->legacySupport) {
  IntersectionObserverPolyfillAsset::register($this->view);
+ $this->view->registerJs("IntersectionObserver.prototype.POLL_INTERVAL = 100;", View::POS_READY);
  }
  LazyLoadAsset::register($this->view);
 
  if ($this->initJs) {
  // register js and css code with keys in order to ensure the registration is done only once
- $this->view->registerJs("$.lazyLoad();", View::POS_READY, self::JS_ASSET_KEY);
+ $this->view->registerJs("
+ $.lazyLoad();
+ ", View::POS_READY, self::JS_ASSET_KEY);
  }
 
  $this->view->registerCss($this->defaultCss, [], self::CSS_ASSET_KEY);
  }
 
  /**
  * Returns the aspect ration based on height or width.
- * 
- * If no width or height is provided, the default value 56.25 will be returned.
+ *
+ * If no width or height is provided, the default value 0 will be returned.
  *
  * @return float A dot seperated ratio value
  * @since 1.6.1
@@ -176,19 +188,28 @@ public function run()
  }
 
  if ($this->attributesOnly && !$this->placeholderSrc) {
- return "class=\"js-lazyimage {$this->extraClass}\" data-src=\"$this->src\" data-width=\"$this->width\" data-height=\"$this->height\" data-as-background=\"1\"";
+ return "class=\"js-lazyimage $this->extraClass\" data-src=\"$this->src\" data-width=\"$this->width\" data-height=\"$this->height\" data-as-background=\"1\"";
  }
 
  $tag = '<div class="lazyimage-wrapper ' . $this->extraClass . '">';
- $tag .= Html::tag('img', '', array_merge($this->options, ['class' => 'js-lazyimage lazyimage', 'data-src' => $this->src, 'data-width' => $this->width, 'data-height' => $this->height]));
+ $tag .= Html::tag('img', '', array_merge(
+ $this->options,
+ [
+ 'class' => 'js-lazyimage lazyimage' . ($this->replacePlaceholder ? (' ' . $this->extraClass) : ''),
+ 'data-src' => $this->src,
+ 'data-width' => $this->width,
+ 'data-height' => $this->height,
+ 'data-replace-placeholder' => $this->replacePlaceholder ? '1' : '0'
+ ]
+ ));
  if ($this->placeholderSrc) {
  $tag .= Html::tag('img', '', ['class' => 'lazyimage-placeholder', 'src' => $this->placeholderSrc]);
  } else {
  $tag .= '<div class="lazyimage-placeholder"><div style="display: block; height: 0px; padding-bottom: ' . $this->generateAspectRation() . '%;"></div><div class="loader"></div></div>';
  }
- $tag .= '<noscript><img class="lazyimage loaded ' . $this->extraClass . '" src="'.$this->src.'" /></noscript>';
+ $tag .= '<noscript><img class="loaded ' . $this->extraClass . '" src="'.$this->src.'" /></noscript>';
  $tag .= '</div>';
 
  return $tag;
  }
-}
+}