The Lazyload component accepts a srcset attribute(#82).

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.4.6
+ * Version  : 2.4.7
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -4906,12 +4906,19 @@ var UPDATE_EVENT = 'updated.page refresh.page';
 
 
 /**
- * The name for a data attribute.
+ * The name for a data attribute of src.
  *
  * @type {string}
  */
 
 var SRC_DATA_NAME = 'data-splide-lazy';
+/**
+ * The name for a data attribute of srcset.
+ *
+ * @type {string}
+ */
+
+var SRCSET_DATA_NAME = 'data-splide-lazy-srcset';
 /**
  * The component for loading slider images lazily.
  *
@@ -4971,8 +4978,8 @@ var SRC_DATA_NAME = 'data-splide-lazy';
       Splide.on('mounted refresh', function () {
         init();
         Components.Elements.each(function (Slide) {
-          each(Slide.slide.querySelectorAll("[" + SRC_DATA_NAME + "]"), function (img) {
-            if (!img.src) {
+          each(Slide.slide.querySelectorAll("[" + SRC_DATA_NAME + "], [" + SRCSET_DATA_NAME + "]"), function (img) {
+            if (!img.src && !img.srcset) {
               images.push({
                 img: img,
                 Slide: Slide
@@ -5055,6 +5062,7 @@ var SRC_DATA_NAME = 'data-splide-lazy';
       loaded(img, spinner, Slide, true);
     };
 
+    setAttribute(img, 'srcset', getAttribute(img, SRCSET_DATA_NAME));
     setAttribute(img, 'src', getAttribute(img, SRC_DATA_NAME));
   }
   /**

dist/js/splide.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.4.6
+ * Version  : 2.4.7
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -4896,12 +4896,19 @@ var UPDATE_EVENT = 'updated.page refresh.page';
 
 
 /**
- * The name for a data attribute.
+ * The name for a data attribute of src.
  *
  * @type {string}
  */
 
 var SRC_DATA_NAME = 'data-splide-lazy';
+/**
+ * The name for a data attribute of srcset.
+ *
+ * @type {string}
+ */
+
+var SRCSET_DATA_NAME = 'data-splide-lazy-srcset';
 /**
  * The component for loading slider images lazily.
  *
@@ -4961,8 +4968,8 @@ var SRC_DATA_NAME = 'data-splide-lazy';
       Splide.on('mounted refresh', function () {
         init();
         Components.Elements.each(function (Slide) {
-          each(Slide.slide.querySelectorAll("[" + SRC_DATA_NAME + "]"), function (img) {
-            if (!img.src) {
+          each(Slide.slide.querySelectorAll("[" + SRC_DATA_NAME + "], [" + SRCSET_DATA_NAME + "]"), function (img) {
+            if (!img.src && !img.srcset) {
               images.push({
                 img: img,
                 Slide: Slide
@@ -5045,6 +5052,7 @@ var SRC_DATA_NAME = 'data-splide-lazy';
       loaded(img, spinner, Slide, true);
     };
 
+    setAttribute(img, 'srcset', getAttribute(img, SRCSET_DATA_NAME));
     setAttribute(img, 'src', getAttribute(img, SRC_DATA_NAME));
   }
   /**

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "description": "Splide is a lightweight and powerful slider without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/lazyload/index.js

@@ -19,12 +19,18 @@ import {
 import { each } from "../../utils/object";
 
 /**
- * The name for a data attribute.
+ * The name for a data attribute of src.
  *
  * @type {string}
  */
 const SRC_DATA_NAME = 'data-splide-lazy';
 
+/**
+ * The name for a data attribute of srcset.
+ *
+ * @type {string}
+ */
+const SRCSET_DATA_NAME = 'data-splide-lazy-srcset';
 
 /**
  * The component for loading slider images lazily.
@@ -85,8 +91,8 @@ export default ( Splide, Components, name ) => {
 				init();
 
 				Components.Elements.each( Slide => {
-					each( Slide.slide.querySelectorAll( `[${ SRC_DATA_NAME }]` ), img => {
-						if ( ! img.src ) {
+					each( Slide.slide.querySelectorAll( `[${ SRC_DATA_NAME }], [${ SRCSET_DATA_NAME }]` ), img => {
+						if ( ! img.src && ! img.srcset ) {
 							images.push( { img, Slide } );
 							applyStyle( img, { display: 'none' } );
 						}
@@ -157,6 +163,7 @@ export default ( Splide, Components, name ) => {
 		img.onload  = () => { loaded( img, spinner, Slide, false ) };
 		img.onerror = () => { loaded( img, spinner, Slide, true ) };
 
+		setAttribute( img, 'srcset', getAttribute( img, SRCSET_DATA_NAME ) );
 		setAttribute( img, 'src', getAttribute( img, SRC_DATA_NAME ) );
 	}