diff --git a/src/LazyImage/README.md b/src/LazyImage/README.md
index 36b8b8e2380..b912ac2b95f 100644
--- a/src/LazyImage/README.md
+++ b/src/LazyImage/README.md
@@ -37,6 +37,9 @@ page has been rendered:
{{ stimulus_controller('symfony/ux-lazy-image/lazy-image') }}
data-hd-src="{{ asset('image/large.png') }}"
+ srcset="{{ asset('image/small.png') }} 1x, {{ asset('image/small2x.png') }} 2x"
+ data-hd-srcset="{{ asset('image/large.png') }} 1x, {{ asset('image/large2x.png') }} 2x"
+
{# Optional but avoids having a page jump when the image is loaded #}
width="200"
height="150"
diff --git a/src/LazyImage/Resources/assets/dist/controller.js b/src/LazyImage/Resources/assets/dist/controller.js
index cb303cad8e7..83eaf838081 100644
--- a/src/LazyImage/Resources/assets/dist/controller.js
+++ b/src/LazyImage/Resources/assets/dist/controller.js
@@ -29,7 +29,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
@@ -57,12 +57,20 @@ var _default = /*#__PURE__*/function (_Controller) {
hd.addEventListener('load', function () {
_this.element.src = _this.element.getAttribute('data-hd-src');
+ if (_this.element.getAttribute('data-hd-srcset')) {
+ _this.element.srcset = _this.element.getAttribute('data-hd-srcset');
+ }
+
_this._dispatchEvent('lazy-image:ready', {
hd: hd
});
});
hd.src = this.element.getAttribute('data-hd-src');
+ if (this.element.getAttribute('data-hd-srcset')) {
+ hd.srcset = this.element.getAttribute('data-hd-srcset');
+ }
+
this._dispatchEvent('lazy-image:connect', {
hd: hd
});
diff --git a/src/LazyImage/Resources/assets/src/controller.js b/src/LazyImage/Resources/assets/src/controller.js
index 403cab71875..5d0354342da 100644
--- a/src/LazyImage/Resources/assets/src/controller.js
+++ b/src/LazyImage/Resources/assets/src/controller.js
@@ -17,10 +17,16 @@ export default class extends Controller {
hd.addEventListener('load', () => {
this.element.src = this.element.getAttribute('data-hd-src');
+ if (this.element.getAttribute('data-hd-srcset')) {
+ this.element.srcset = this.element.getAttribute('data-hd-srcset');
+ }
this._dispatchEvent('lazy-image:ready', { hd });
});
hd.src = this.element.getAttribute('data-hd-src');
+ if (this.element.getAttribute('data-hd-srcset')) {
+ hd.srcset = this.element.getAttribute('data-hd-srcset');
+ }
this._dispatchEvent('lazy-image:connect', { hd });
}
diff --git a/src/LazyImage/Resources/assets/test/controller.test.js b/src/LazyImage/Resources/assets/test/controller.test.js
index 1d96aaa91f6..7bd890977d5 100644
--- a/src/LazyImage/Resources/assets/test/controller.test.js
+++ b/src/LazyImage/Resources/assets/test/controller.test.js
@@ -34,10 +34,13 @@ describe('LazyImageController', () => {
beforeEach(() => {
container = mountDOM(`
-
+
`);
});